Как убрать скролл у якоря?

Рейтинг: -1Ответов: 1Опубликовано: 10.01.2023

В общем ситуация такова, что у меня есть две кнопки, которые переключают div'ы, при этом при загрузке страницы один из div'ов активен, но теперь есть проблема, что при переходе на эту страницу её сразу скроллит к якорю. Мне же нужно, чтобы страница открывалась сразу сверху. Помогите, пожалуйста. Синей линией выделил куда он скроллит.введите сюда описание изображения

window.onload = function() {
  document.querySelector("#bt a").click();
};
body {
  width: 1280px;
  height: 2320px;
  background-image: url("images/background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  font-family: 'Open Sans', sans-serif;
}

.header {
  padding-left: 20px;
  display: flex;
  align-items: center;
  margin-left: 25px;
  margin-top: 50px;
  width: 1275px;
  height: 90px;
  background-color: #ab0f0f;
}

.header_inner {
  width: 1000px;
  height: 40px;
  margin-top: 10px;
}

.for_list {
  display: flex;
}

.for_list a {
  font-family: 'Oswald', sans-serif;
  color: white;
  text-decoration: none;
  padding-left: 30px;
}

.list {
  display: none;
  position: absolute;
  background-color: #414141;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.list a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.list2 {
  display: none;
  position: absolute;
  background-color: #414141;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.list2 a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.sc a:hover {
  color: #C0C0C0;
  text-decoration: underline;
}

.hs a:hover {
  color: #C0C0C0;
  text-decoration: underline;
}

.list a:hover {
  color: #DAA520;
  text-decoration: none;
  background-color: rgba(218, 165, 32, 0.2);
}

.dropmenu:hover .list {
  display: block;
}

.list2 a:hover {
  color: #DAA520;
  text-decoration: none;
  background-color: rgba(218, 165, 32, 0.2);
}

.dropmenu2:hover .list2 {
  display: block;
}

.main {
  width: 1280px;
  height: 720px;
}

.main_border {
  width: 1291px;
  margin-top: 20px;
  height: 2150px;
  background-color: #2d2d2d;
  border-style: solid;
  border-width: 2px;
  border-color: #ab0f0f;
  margin-left: 25px;
}

.main_leftside {
  position: absolute;
  width: 600px;
  height: 1000px;
}

.main_rightside {
  width: 600px;
  height: 1000px;
  margin-left: 600px;
}

.category {
  display: inline-block;
  padding: 30px;
}

.category span {
  color: white;
  font-size: 17px;
}

.category a {
  color: #DAA520;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
}

.header_namepage span {
  font-size: 36px;
  font-weight: 300;
  letter-spacing: .25px;
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: break-word;
  font-family: 'Jura', sans-serif;
  color: white;
}

.header_namepage {
  padding-left: 30px;
}

.pr {
  padding-left: 30px;
  color: white;
}

.wc {
  color: #DAA520;
  text-decoration: none;
}

.dz {
  color: #DAA520;
  text-decoration: none;
}

.vf {
  color: #DAA520;
  text-decoration: none;
}

.content {
  display: table;
  background-color: transparent;
  border: 1px solid gray;
  border-radius: 3px;
  font-size: 100%;
  margin-left: 25px;
  padding: 0;
  height: 200px;
  width: 230px;
  text-align: center;
  align-items: center;
}

.content_title {
  -webkit-box-pack: justify;
  border-bottom: 1px solid gray;
  justify-content: space-between;
  line-height: 1;
  padding: 5px;
}

.content_title h1 {
  margin-left: -100px;
  font-size: 15px;
  color: white;
}

.text {
  color: white;
}

.content_level a {
  text-decoration: none;
  padding: 5px;
}

li {
  color: white;
  width: 10px;
}

.table_content {
  width: 400px;
  height: 642px;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  margin-left: 50px;
  margin-top: 100px;
  border-color: #DAA520;
}

.table_content2 {
  width: 400px;
  height: 672px;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  margin-left: 50px;
  margin-top: 100px;
  border-color: #DAA520;
}

.table_title {
  display: flex;
  background: red;
  height: 50px;
  width: 400px;
  align-items: center;
  justify-content: center;
  color: white;
}

.table_flag_image {
  padding-top: 10px;
  display: flex;
  justify-content: center;
}

.first_place {
  display: flex;
  padding-top: 10px;
  border-bottom-color: #DAA520;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  font-size: 20px;
  color: white;
  padding-left: 15px;
}

.last_place {
  display: flex;
  padding-top: 10px;
  font-size: 20px;
  color: white;
  padding-left: 15px;
}

.first_text {
  width: 170px;
}

.first_text_cont a {
  text-decoration: none;
  color: #DAA520;
}

.headline {
  color: white;
  font-size: 30px;
}

.uniform_text {
  margin-left: 25px;
  color: white;
}

.history_text {
  margin-left: 25px;
  color: white;
}

.structure_text {
  margin-left: 25px;
  color: white;
}

.table_members {
  width: 500px;
  height: 750px;
}

.tm_scroll {
  display: flex;
  margin-left: 30px;
  height: 40px;
}

.tm_list {
  margin-left: 20px;
}

.tm_list:hover {
  border-bottom-color: #fec356;
  border-bottom-style: solid;
  border-bottom-width: 3px;
}

.tm_list a {
  color: gray;
  font-size: 20px;
  text-decoration: none;
  font-weight: bold;
}

.tm_table {
  margin-top: 3px;
  margin-left: 50px;
  width: 500px;
  height: 700px;
  border-color: #ab0f0f;
  border-style: solid;
  border-width: 3px;
}

.tm_table_2 {
  margin-top: 3px;
  margin-left: 50px;
  width: 500px;
  height: 950px;
  border-color: #ab0f0f;
  border-style: solid;
  border-width: 3px;
}

.tm_table_title {
  display: flex;
  background: #ab0f0f;
  height: 50px;
  width: 500px;
  align-items: center;
  justify-content: center;
  color: white;
}

.tm_table_secondarytitle {
  margin-top: 1px;
  display: flex;
  background: #fec356;
  height: 40px;
  width: 499px;
  align-items: center;
  justify-content: center;
  color: black;
}

.leader_image img {
  border-color: #fec356;
  border-width: 3px;
  border-style: double;
}

.leader_image {
  padding-top: 25px;
  justify-content: center;
  display: flex;
}

.tm_table_vice {
  margin-top: 1px;
  display: flex;
  background: #fec356;
  height: 40px;
  width: 499px;
  align-items: center;
  justify-content: center;
  color: black;
  margin-top: 15px;
}

.nickname {
  position: absolute;
  display: flex;
  margin-top: 115px;
  margin-left: 60px;
  color: #fec356;
  background-color: black;
}

.captians {
  flex-wrap: wrap;
  margin-top: 25px;
  display: flex;
  justify-content: center;
  margin-right: 10px;
}

.leader {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  margin-right: 10px;
}

.table_box {
  margin-left: 10px;
}

.table_text {
  margin-top: -30px;
  color: #fec356;
  background-color: black;
  display: flex;
  justify-content: end;
}

.table_text b {
  font-size: 14px;
  font-weight: normal;
  background-color: black;
}

.tm_scroll1 {
  display: none;
}

.namesquad {
  margin-top: 4px;
  display: flex;
  justify-content: center;
  font-size: 12px;
  color: white;
}

.leader_image2 img {
  border-color: #fec356;
  border-width: 3px;
  border-style: double;
}
<div class="table_members">
  <div class="tm_scroll">
    <div id="bt" class="tm_list">
      <a href="#viewFirstMenu">Первое поколение</a>
    </div>
    <div id="bt" class="tm_list">
      <a href="#viewSecondMenu">Второе поколение</a>
    </div>
  </div>
  <div class="tm_table" id="viewFirstMenu">
    <div class="tm_table_title">
      <h2>Анимант</h2>
    </div>
    <div class="tm_table_secondarytitle">
      <h2>Глава</h2>
    </div>
    <div class="leader">
      <div class="table_box">
        <div class="leader_image2">
          <img src="464.png" alt="">
        </div>
        <div class="table_text">
          <b>DizzMant</b>
        </div>
      </div>
    </div>
    <div class="tm_table_vice">
      <h2>Администратор</h2>
    </div>
    <div class="leader">
      <div class="table_box">
        <div class="leader_image2">
          <img src="wlf.png" alt="">
        </div>
        <div class="table_text">
          <b>Wolfach</b>
        </div>
      </div>
    </div>
    <div class="tm_table_vice">
      <h2>Старший модератор</h2>
    </div>
    <div class="leader">
      <div class="table_box">
        <div class="leader_image2">
          <img src="vf.png" alt="">
        </div>
        <div class="table_text">
          <b>Vitya.Fox</b>
        </div>
      </div>
    </div>
  </div>
  <div class="tm_table_2" id="viewSecondMenu">
    <div class="tm_table_title">
      <h2>Анимант</h2>
    </div>
    <div class="tm_table_secondarytitle">
      <h2>Глава</h2>
    </div>
    <<div class="leader">
      <div class="table_box">
        <div class="leader_image2">
          <img src="464.png" alt="">
        </div>
        <div class="table_text">
          <b>DizzMant</b>
        </div>
      </div>
  </div>
  <div class="tm_table_vice">
    <h2>Администратор</h2>
  </div>
  <div class="leader">
    <div class="table_box">
      <div class="leader_image2">
        <img src="wlf.png" alt="">
      </div>
      <div class="table_text">
        <b>Wolfach</b>
      </div>
    </div>
  </div>
  <div class="tm_table_vice">
    <h2>Старший модератор</h2>
  </div>
  <div class="leader">
    <div class="table_box">
      <div class="leader_image2">
        <img src="vf.png" alt="">
      </div>
      <div class="table_text">
        <b>Vitya.Fox</b>
      </div>
    </div>
  </div>
  <div class="tm_table_vice">
    <h2>Известные члены</h2>
  </div>
  <div class="leader">
    <div class="table_box">
      <div class="leader_image2">
        <img src="question.png" alt="">
      </div>
      <div class="table_text">
        <b>Nesta</b>
      </div>
    </div>
  </div>

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 0

Мне же нужно, чтобы страница открывалась сразу сверху.

При таком варианте css можно предложить такую "затычку". Но лучше переделать css и добавить JS для обработки твоих "табов/закладок".

window.onload = function() {
  document.querySelector("#bt a").click();
  setTimeout(_ =>window.scrollTo(0, 0), 500)
};
body {
  width: 1280px;
  height: 2320px;
  background-image: url("images/background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  font-family: 'Open Sans', sans-serif;
}

.header {
  padding-left: 20px;
  display: flex;
  align-items: center;
  margin-left: 25px;
  margin-top: 50px;
  width: 1275px;
  height: 90px;
  background-color: #ab0f0f;
}

.header_inner {
  width: 1000px;
  height: 40px;
  margin-top: 10px;
}

.for_list {
  display: flex;
}

.for_list a {
  font-family: 'Oswald', sans-serif;
  color: white;
  text-decoration: none;
  padding-left: 30px;
}

.list {
  display: none;
  position: absolute;
  background-color: #414141;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.list a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.list2 {
  display: none;
  position: absolute;
  background-color: #414141;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.list2 a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.sc a:hover {
  color: #C0C0C0;
  text-decoration: underline;
}

.hs a:hover {
  color: #C0C0C0;
  text-decoration: underline;
}

.list a:hover {
  color: #DAA520;
  text-decoration: none;
  background-color: rgba(218, 165, 32, 0.2);
}

.dropmenu:hover .list {
  display: block;
}

.list2 a:hover {
  color: #DAA520;
  text-decoration: none;
  background-color: rgba(218, 165, 32, 0.2);
}

.dropmenu2:hover .list2 {
  display: block;
}

.main {
  width: 1280px;
  height: 720px;
}

.main_border {
  width: 1291px;
  margin-top: 20px;
  height: 2150px;
  background-color: #2d2d2d;
  border-style: solid;
  border-width: 2px;
  border-color: #ab0f0f;
  margin-left: 25px;
}

.main_leftside {
  position: absolute;
  width: 600px;
  height: 1000px;
}

.main_rightside {
  width: 600px;
  height: 1000px;
  margin-left: 600px;
}

.category {
  display: inline-block;
  padding: 30px;
}

.category span {
  color: white;
  font-size: 17px;
}

.category a {
  color: #DAA520;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
}

.header_namepage span {
  font-size: 36px;
  font-weight: 300;
  letter-spacing: .25px;
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: break-word;
  font-family: 'Jura', sans-serif;
  color: white;
}

.header_namepage {
  padding-left: 30px;
}

.pr {
  padding-left: 30px;
  color: white;
}

.wc {
  color: #DAA520;
  text-decoration: none;
}

.dz {
  color: #DAA520;
  text-decoration: none;
}

.vf {
  color: #DAA520;
  text-decoration: none;
}

.content {
  display: table;
  background-color: transparent;
  border: 1px solid gray;
  border-radius: 3px;
  font-size: 100%;
  margin-left: 25px;
  padding: 0;
  height: 200px;
  width: 230px;
  text-align: center;
  align-items: center;
}

.content_title {
  -webkit-box-pack: justify;
  border-bottom: 1px solid gray;
  justify-content: space-between;
  line-height: 1;
  padding: 5px;
}

.content_title h1 {
  margin-left: -100px;
  font-size: 15px;
  color: white;
}

.text {
  color: white;
}

.content_level a {
  text-decoration: none;
  padding: 5px;
}

li {
  color: white;
  width: 10px;
}

.table_content {
  width: 400px;
  height: 642px;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  margin-left: 50px;
  margin-top: 100px;
  border-color: #DAA520;
}

.table_content2 {
  width: 400px;
  height: 672px;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  margin-left: 50px;
  margin-top: 100px;
  border-color: #DAA520;
}

.table_title {
  display: flex;
  background: red;
  height: 50px;
  width: 400px;
  align-items: center;
  justify-content: center;
  color: white;
}

.table_flag_image {
  padding-top: 10px;
  display: flex;
  justify-content: center;
}

.first_place {
  display: flex;
  padding-top: 10px;
  border-bottom-color: #DAA520;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  font-size: 20px;
  color: white;
  padding-left: 15px;
}

.last_place {
  display: flex;
  padding-top: 10px;
  font-size: 20px;
  color: white;
  padding-left: 15px;
}

.first_text {
  width: 170px;
}

.first_text_cont a {
  text-decoration: none;
  color: #DAA520;
}

.headline {
  color: white;
  font-size: 30px;
}

.uniform_text {
  margin-left: 25px;
  color: white;
}

.history_text {
  margin-left: 25px;
  color: white;
}

.structure_text {
  margin-left: 25px;
  color: white;
}

.table_members {
  width: 500px;
  height: 750px;
}

.tm_scroll {
  display: flex;
  margin-left: 30px;
  height: 40px;
}

.tm_list {
  margin-left: 20px;
}

.tm_list:hover {
  border-bottom-color: #fec356;
  border-bottom-style: solid;
  border-bottom-width: 3px;
}

.tm_list a {
  color: gray;
  font-size: 20px;
  text-decoration: none;
  font-weight: bold;
}

.tm_table {
  margin-top: 3px;
  margin-left: 50px;
  width: 500px;
  height: 700px;
  border-color: #ab0f0f;
  border-style: solid;
  border-width: 3px;
}

.tm_table_2 {
  margin-top: 3px;
  margin-left: 50px;
  width: 500px;
  height: 950px;
  border-color: #ab0f0f;
  border-style: solid;
  border-width: 3px;
}

.tm_table_title {
  display: flex;
  background: #ab0f0f;
  height: 50px;
  width: 500px;
  align-items: center;
  justify-content: center;
  color: white;
}

.tm_table_secondarytitle {
  margin-top: 1px;
  display: flex;
  background: #fec356;
  height: 40px;
  width: 499px;
  align-items: center;
  justify-content: center;
  color: black;
}

.leader_image img {
  border-color: #fec356;
  border-width: 3px;
  border-style: double;
}

.leader_image {
  padding-top: 25px;
  justify-content: center;
  display: flex;
}

.tm_table_vice {
  margin-top: 1px;
  display: flex;
  background: #fec356;
  height: 40px;
  width: 499px;
  align-items: center;
  justify-content: center;
  color: black;
  margin-top: 15px;
}

.nickname {
  position: absolute;
  display: flex;
  margin-top: 115px;
  margin-left: 60px;
  color: #fec356;
  background-color: black;
}

.captians {
  flex-wrap: wrap;
  margin-top: 25px;
  display: flex;
  justify-content: center;
  margin-right: 10px;
}

.leader {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  margin-right: 10px;
}

.table_box {
  margin-left: 10px;
}

.table_text {
  margin-top: -30px;
  color: #fec356;
  background-color: black;
  display: flex;
  justify-content: end;
}

.table_text b {
  font-size: 14px;
  font-weight: normal;
  background-color: black;
}

.tm_scroll1 {
  display: none;
}

.namesquad {
  margin-top: 4px;
  display: flex;
  justify-content: center;
  font-size: 12px;
  color: white;
}

.leader_image2 img {
  border-color: #fec356;
  border-width: 3px;
  border-style: double;
}
<div class="table_members">
  <div class="tm_scroll">
    <div id="bt" class="tm_list">
      <a href="#viewFirstMenu">Первое поколение</a>
    </div>
    <div id="bt" class="tm_list">
      <a href="#viewSecondMenu">Второе поколение</a>
    </div>
  </div>
  <div class="tm_table" id="viewFirstMenu">
    <div class="tm_table_title">
      <h2>Анимант</h2>
    </div>
    <div class="tm_table_secondarytitle">
      <h2>Глава</h2>
    </div>
    <div class="leader">
      <div class="table_box">
        <div class="leader_image2">
          <img src="464.png" alt="">
        </div>
        <div class="table_text">
          <b>DizzMant</b>
        </div>
      </div>
    </div>
    <div class="tm_table_vice">
      <h2>Администратор</h2>
    </div>
    <div class="leader">
      <div class="table_box">
        <div class="leader_image2">
          <img src="wlf.png" alt="">
        </div>
        <div class="table_text">
          <b>Wolfach</b>
        </div>
      </div>
    </div>
    <div class="tm_table_vice">
      <h2>Старший модератор</h2>
    </div>
    <div class="leader">
      <div class="table_box">
        <div class="leader_image2">
          <img src="vf.png" alt="">
        </div>
        <div class="table_text">
          <b>Vitya.Fox</b>
        </div>
      </div>
    </div>
  </div>
  <div class="tm_table_2" id="viewSecondMenu">
    <div class="tm_table_title">
      <h2>Анимант</h2>
    </div>
    <div class="tm_table_secondarytitle">
      <h2>Глава</h2>
    </div>
    <<div class="leader">
      <div class="table_box">
        <div class="leader_image2">
          <img src="464.png" alt="">
        </div>
        <div class="table_text">
          <b>DizzMant</b>
        </div>
      </div>
  </div>
  <div class="tm_table_vice">
    <h2>Администратор</h2>
  </div>
  <div class="leader">
    <div class="table_box">
      <div class="leader_image2">
        <img src="wlf.png" alt="">
      </div>
      <div class="table_text">
        <b>Wolfach</b>
      </div>
    </div>
  </div>
  <div class="tm_table_vice">
    <h2>Старший модератор</h2>
  </div>
  <div class="leader">
    <div class="table_box">
      <div class="leader_image2">
        <img src="vf.png" alt="">
      </div>
      <div class="table_text">
        <b>Vitya.Fox</b>
      </div>
    </div>
  </div>
  <div class="tm_table_vice">
    <h2>Известные члены</h2>
  </div>
  <div class="leader">
    <div class="table_box">
      <div class="leader_image2">
        <img src="question.png" alt="">
      </div>
      <div class="table_text">
        <b>Nesta</b>
      </div>
    </div>
  </div>