Я хочу прокручивать или указывать этот алфавит при нажатии в меню

Меню и выбор алфавита

В этом проекте пользователь может искать слово этого конкретного алфавита, щелкая алфавит, указанный в меню.

To see the menu click on the Alphabet header with black Background.

⚠️Important thing test it on full screen
Я хочу, чтобы я нажимал на алфавиты в списке в меню, тогда экран должен указывать или прокручиваться до алфавита, на который я нажал.

function wordbar(){
let y = document.getElementById("Invisible");
  
if(y.className === "Hiddenbox"){
  document.querySelector("body").style.overflow = "hidden";
  document.getElementById("Invisible").style.visibility = "visible"; 
}else{
    document.querySelector("body").style.overflow = "auto";
    document.getElementById("Invisible").style.display = "none";
}
}


function Removebar(){
   const hiddenbox = document.getElementById("Invisible").className;
  if(hiddenbox === "Hiddenbox"){
    document.querySelector("body").style.overflow = "auto";
    document.getElementById("Invisible").style.visibility = "hidden";
  }else{
    document.querySelector("body").style.overflow = "";
    document.getElementById("Invisible").style.display = "";
  }
}
body{
  overflow: auto;
}
.Mainbox{
  width: 100%;
}

h2{
  height: 30px;
  font-family: montserrat;
  color: white;
  background-color: black;
  padding: 10px;
  padding-left: 40px;
  position: sticky;
  top: 10px;
  border-radius: 5px;
  cursor: pointer;
}

li{
  font-family: poppins;
  list-style: none;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 1px solid grey;
  padding-left: 40px;
}

ul{
  padding: 0px;
}



.Hiddenbox{
  visibility: hidden;
  margin-top: 10px;
  width: 100%;
  padding: 10px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
left: 0px;
  height: 100vh;
  box-sizing: border-box;
/*   background-color: #d2d2d2;
  */
  position: fixed;
  top: 0px;
}
.container{
  width: 45%;
  padding: 30px 50px 10px;
  display: flex;
  justify-content: center;
  align-content: space-around;
  flex-wrap: wrap;
  column-gap: 10px;
  max-height: 400px;
  height: 300px;
  border: 1px solid dimgrey;
  background-color: black;
  border-radius: 8px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(50px);
  position: relative;
}

.click-lines{
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  font-size: 16px;
  justify-content: center;
  border: 1px solid dimgrey;
  border-radius: 0.5em;
  padding: 0px;
  transition: all 0.1s ease; 
  color: white;
  text-align: auto;
  cursor: pointer;
}


.click-lines:hover{
  background-color: white;
  color: black;
  border: 1px solid grey;
  transform: scale(1.04);
}

.togglebar{
  color: white;
  font-size: 30px;
  padding: 0px;
  border: 0px;
  width: 30px;
  height: auto;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}


@media screen and (max-width: 600px){
.click-lines{
  width: 30px;
  height: 30px;
}
}
<div class="Mainbox" id="box">
  <h2 href="javascript:void()" onclick="wordbar()" id="A-letter">A</h2>
  <ul>
    <li>Apple</li>
    <li>Appiv</li>
    <li>Ananus</li>
    <li>Ambar</li>
  </ul>
  <h2 href="javascript:void()" onclick="wordbar()">B</h2>
  <ul>
    <li>Bejing</li>
    <li>brothal</li>
    <li>brother</li>
    <li>Banana</li>
  </ul>
  <h2 href="javascript:void()" onclick="wordbar()" >C</h2>
  <ul>
    <li>Cat</li>
    <li>cow</li>
    <li>calculas</li>
    <li>car</li>
  </ul>
  <h2 href="javascript:void()" onclick="wordbar()">D</h2>
  <ul>
    <li>Dat</li>
    <li>Dow</li>
    <li>Dalculas</li>
    <li>Dar</li>
  </ul>
  <h2 href="javascript:void()" onclick="wordbar()">E</h2>
  <ul>
    <li>Eat</li>
    <li>Eow</li>
    <li>Ealculas</li>
    <li>Ear</li>
  </ul>
<h2 href="javascript:void()" onclick="wordbar()">F</h2>
  <ul>
    <li>Feet</li>
    <li>Form</li>
    <li>fungus</li>
    <li>Fan</li>
  </ul>
  <h2 href="javascript:void()" onclick="wordbar()">G</h2>
  <ul>
    <li>Grasp</li>
    <li>Grow</li>
    <li>Game</li>
    <li>Goat</li>
  </ul>
  <h2 href="javascript:void()" onclick="wordbar()">H</h2>
  <ul>
    <li>hola</li>
    <li>Hampter</li>
    <li>Hercules</li>
    <li>Hear</li>
  </ul>
</div>
<div class="Hiddenbox" id="Invisible">
    <div class="container">
      <li href="#A" onclick="Removebar()" class="click-lines">A</li>
      <li href="#B" onclick="Removebar()" class="click-lines">B</li>
      <li href="#C" onclick="Removebar()" class="click-lines">C</li>
      <li href="#D" onclick="Removebar()" class="click-lines">D</li>
      <li href="#E" onclick="Removebar()" class="click-lines">E</li>
      <li href="#F" onclick="Removebar()" class="click-lines">F</li>
      <li href="#G" onclick="Removebar()" class="click-lines">G</li>
      <li href="#H" onclick="Removebar()" class="click-lines">H</li>
      <li href="#I" onclick="Removebar()" class="click-lines">I</li>
      <li href="#J" onclick="Removebar()"class="click-lines">J</li>
      <li href="#K" onclick="Removebar()"class="click-lines">K</li>
      <li href="#L" onclick="Removebar()"class="click-lines">L</li>
      <li href="#M" onclick="Removebar()"class="click-lines">M</li>
      <li href="#N" onclick="Removebar()"class="click-lines">N</li>
      <li href="#O" onclick="Removebar()"class="click-lines">O</li>
      <li href="#P" onclick="Removebar()"class="click-lines">P</li>
      <li href="#Q" onclick="Removebar()"class="click-lines">Q</li>
      <li href="#R" onclick="Removebar()"class="click-lines">R</li>
      <li href="#S" onclick="Removebar()"class="click-lines">S</li>
      <li href="#T" onclick="Removebar()"class="click-lines">T</li>
      <li href="#U" onclick="Removebar()"class="click-lines">U</li>
      <li href="#V" onclick="Removebar()"class="click-lines">V</li>
      <li href="#W" onclick="Removebar()"class="click-lines">W</li>
      <li href="#X" onclick="Removebar()"class="click-lines">X</li>
      <li href="#Y" onclick="Removebar()"class="click-lines">Y</li>
      <li href="#Z" onclick="Removebar()"class="click-lines">Z</li>
      <li class="togglebar" href="javascript:void(0)" onclick="Removebar()" >&times;</li>
    </div>
</div>
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
0
35
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Изменить - исправление проблемы с прокруткой вверх

Мы не можем правильно определить позицию ваших элементов, потому что вы используете относительную позицию. Вместо этого мы будем использовать более пуленепробиваемую версию — element.getBoundingClientRect().

this method returns a DOMRect object providing information about the size of an element and its position relative to the viewport

Таким образом, мы в конечном итоге получаем позиции смещения сверху, справа, снизу и слева относительно области просмотра.

мы будем использовать это, чтобы получить верхнее смещение и прокрутить до него следующим образом

let letterElement = document.querySelector(`#${letter}-letter`);   
window.scrollTo(0, letterElement.getBoundingClientRect().top);

вместо:

document.getElementById(`${letter}-letter`).scrollIntoView();

Теперь он должен работать безупречно (я также изменил скрипку ниже, чтобы вы могли видеть).


Вы на самом деле очень близки к решению этой проблемы в вашей текущей реализации! вы должны добавить переменную в свою функцию removeBar(), чтобы удерживать выбранную букву и использовать scrollIntoView при выборе ее идентификатора.

возьмем букву А, на ее теге <h2> у вас есть идентификатор "a-letter". чтобы прокрутить его в поле зрения, вы должны добавить к функции, которая вызывается на событии кнопки A onClick, букву «A», т.е.

<li href="#A" onclick="Removebar('a')" class="click-lines">A</li>

затем в вашей функции removeBar() объявите переменную внутри круглых скобок removeBar(letter).

теперь мы можем поймать идентификатор и scrollIntoView.

полный код:

function wordbar(){
let y = document.getElementById("Invisible");
  
if(y.className === "Hiddenbox"){
  document.querySelector("body").style.overflow = "hidden";
  document.getElementById("Invisible").style.visibility = "visible"; 
}else{
    document.querySelector("body").style.overflow = "auto";
    document.getElementById("Invisible").style.display = "none";
}
}


function Removebar(letter){
   const hiddenbox = document.getElementById("Invisible").className;
  if(hiddenbox === "Hiddenbox"){
    document.querySelector("body").style.overflow = "auto";
    document.getElementById("Invisible").style.visibility = "hidden";
    let letterElement = document.querySelector(`#${letter}-letter`);
    window.scrollTo(0,letterElement.getBoundingClientRect().top);
  }else{
    document.querySelector("body").style.overflow = "";
    document.getElementById("Invisible").style.display = "";
  }
}
body{
  overflow: auto;
}
.Mainbox{
  width: 100%;
}

h2{
  height: 30px;
  font-family: montserrat;
  color: white;
  background-color: black;
  padding: 10px;
  padding-left: 40px;
  position: sticky;
  top: 10px;
  border-radius: 5px;
  cursor: pointer;
}

li{
  font-family: poppins;
  list-style: none;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 1px solid grey;
  padding-left: 40px;
}

ul{
  padding: 0px;
}



.Hiddenbox{
  visibility: hidden;
  margin-top: 10px;
  width: 100%;
  padding: 10px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
left: 0px;
  height: 100vh;
  box-sizing: border-box;
/*   background-color: #d2d2d2;
  */
  position: fixed;
  top: 0px;
}
.container{
  width: 45%;
  padding: 30px 50px 10px;
  display: flex;
  justify-content: center;
  align-content: space-around;
  flex-wrap: wrap;
  column-gap: 10px;
  max-height: 400px;
  height: 300px;
  border: 1px solid dimgrey;
  background-color: black;
  border-radius: 8px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(50px);
  position: relative;
}

.click-lines{
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  font-size: 16px;
  justify-content: center;
  border: 1px solid dimgrey;
  border-radius: 0.5em;
  padding: 0px;
  transition: all 0.1s ease; 
  color: white;
  text-align: auto;
  cursor: pointer;
}


.click-lines:hover{
  background-color: white;
  color: black;
  border: 1px solid grey;
  transform: scale(1.04);
}

.togglebar{
  color: white;
  font-size: 30px;
  padding: 0px;
  border: 0px;
  width: 30px;
  height: auto;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}


@media screen and (max-width: 600px){
.click-lines{
  width: 30px;
  height: 30px;
}
}
<div class="Mainbox" id="box">
  <h2 href="javascript:void()" onclick="wordbar()" id="a-letter">A</h2>
  <ul>
    <li>Apple</li>
    <li>Appiv</li>
    <li>Ananus</li>
    <li>Ambar</li>
  </ul>
  <h2 href="javascript:void()" onclick="wordbar()" id="b-letter">B</h2>
  <ul>
    <li>Bejing</li>
    <li>brothal</li>
    <li>brother</li>
    <li>Banana</li>
  </ul>
  <h2 href="javascript:void()" onclick="wordbar()" id="c-letter">C</h2>
  <ul>
    <li>Cat</li>
    <li>cow</li>
    <li>calculas</li>
    <li>car</li>
  </ul>
  <h2 href="javascript:void()" onclick="wordbar()" id="d-letter">D</h2>
  <ul id="d-words">
    <li>Dat</li>
    <li>Dow</li>
    <li>Dalculas</li>
    <li>Dar</li>
  </ul>
  <h2 href="javascript:void()" onclick="wordbar()" id="e-letter">E</h2>
  <ul>
    <li>Eat</li>
    <li>Eow</li>
    <li>Ealculas</li>
    <li>Ear</li>
  </ul>
<h2 href="javascript:void()" onclick="wordbar()" id="f-letter">F</h2>
  <ul>
    <li>Feet</li>
    <li>Form</li>
    <li>fungus</li>
    <li>Fan</li>
  </ul>
  <h2 href="javascript:void()" onclick="wordbar()" id="g-letter">G</h2>
  <ul>
    <li>Grasp</li>
    <li>Grow</li>
    <li>Game</li>
    <li>Goat</li>
  </ul>
  <h2 href="javascript:void()" onclick="wordbar()" id="h-letter">H</h2>
  <ul id="h-words">
    <li>hola</li>
    <li>Hampter</li>
    <li>Hercules</li>
    <li>Hear</li>
  </ul>
</div>
<div class="Hiddenbox" id="Invisible">
    <div class="container">
      <li href="#A" onclick="Removebar('a')" class="click-lines">A</li>
      <li href="#B" onclick="Removebar('b')" class="click-lines">B</li>
      <li href="#C" onclick="Removebar('c')" class="click-lines">C</li>
      <li href="#D" onclick="Removebar('d')" class="click-lines">D</li>
      <li href="#E" onclick="Removebar('e')" class="click-lines">E</li>
      <li href="#F" onclick="Removebar('f')" class="click-lines">F</li>
      <li href="#G" onclick="Removebar('g')" class="click-lines">G</li>
      <li href="#H" onclick="Removebar('h')" class="click-lines">H</li>
      <li href="#I" onclick="Removebar('i')" class="click-lines">I</li>
      <li href="#J" onclick="Removebar()"class="click-lines">J</li>
      <li href="#K" onclick="Removebar()"class="click-lines">K</li>
      <li href="#L" onclick="Removebar()"class="click-lines">L</li>
      <li href="#M" onclick="Removebar()"class="click-lines">M</li>
      <li href="#N" onclick="Removebar()"class="click-lines">N</li>
      <li href="#O" onclick="Removebar()"class="click-lines">O</li>
      <li href="#P" onclick="Removebar()"class="click-lines">P</li>
      <li href="#Q" onclick="Removebar()"class="click-lines">Q</li>
      <li href="#R" onclick="Removebar()"class="click-lines">R</li>
      <li href="#S" onclick="Removebar()"class="click-lines">S</li>
      <li href="#T" onclick="Removebar()"class="click-lines">T</li>
      <li href="#U" onclick="Removebar()"class="click-lines">U</li>
      <li href="#V" onclick="Removebar()"class="click-lines">V</li>
      <li href="#W" onclick="Removebar()"class="click-lines">W</li>
      <li href="#X" onclick="Removebar()"class="click-lines">X</li>
      <li href="#Y" onclick="Removebar()"class="click-lines">Y</li>
      <li href="#Z" onclick="Removebar()"class="click-lines">Z</li>
      <li class="togglebar" href="javascript:void(0)" onclick="Removebar()" >&times;</li>
    </div>
</div>

Еще одна вещь, когда я нахожусь в букве d и нажимаю на A, она не движется вверх.

Shaik Mohammed Huzaifa 10.04.2022 09:38

хм... позвольте мне проверить

Guy Nachshon 10.04.2022 09:56

Я нашел решение, редактируя свой ответ :)

Guy Nachshon 10.04.2022 10:21

Вот немного прокрутки по дешевке.

CSS

html {
  scroll-behavior: smooth;
}

HTML

<a href=#ID>ID</a>
<h1 id='ID'>ID</h1>

html {
  scroll-behavior: smooth;
}

nav {
  position: fixed;
  top: 0;
}

menu {
  display: flex;
  margin-left: 40px;
  list-style: none;
}

li {
  margin: 0 10px;
}

section {
  min-height: 300vh;
}
<nav>
  <menu>
    <li><a href='#top'>Top</a></li>
    <li><a href='#mid'>Mid</a></li>
    <li><a href='#sub'>Sub</a></li>
  </menu>
</nav>
<section>
  <h1 id='top'>TOP</h1>
  <hr>
</section>
<section>
  <h1 id='mid'>MID</h1>
  <hr>
</section>
<section>
  <h1 id='sub'>SUB</h1>
  <hr>
</section>

Другие вопросы по теме