I want to scroll or point that alphabet when clicked in menu

Question

Menu and Alphabet Selection

In this project, the user can search for that particular alphabet's Word by clicking on the alphabet listed in Menu.

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

⚠️Important thing test it on full screen

What I want is that I click on the alphabets on the list in the menu then the screen should point or scroll to the Alphabet I have clicked on.

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>

Answer 1

Edit - fixing scrolling up problem

We can't get your items ' position correctly because you are using position relative. Instead, we will use the more bulletproof version - element.getBoundingClientRect().

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

So we eventually get the top, right, down and left offset positions relative to the viewport.

we will use that to get the top offset and scroll to it in the following manner

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

instead of:

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

Now it should work flawlessly (I also changed the fiddle below for you to see).

---

You are actually pretty close to solving it in your current implementation! you should add a variable to your removeBar() function to hold the selected letter and use scrollIntoView when selecting its ID.

lets take the letter A, on its <h2> tag you have the id "a-letter". to scroll it into view, you should add to the function that is called on A button onClick event the letter 'A', i.e.

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

then, in your removeBar() function declare the variable inside the parentheses, removeBar(letter).

now we can catch the id, and scrollIntoView.

the full code:

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>

Answer 2

Here's some scrolling on the cheap.

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>