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  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  id="Invisible">
    <div >
      <li href="#A" onclick="Removebar()" >A</li>
      <li href="#B" onclick="Removebar()" >B</li>
      <li href="#C" onclick="Removebar()" >C</li>
      <li href="#D" onclick="Removebar()" >D</li>
      <li href="#E" onclick="Removebar()" >E</li>
      <li href="#F" onclick="Removebar()" >F</li>
      <li href="#G" onclick="Removebar()" >G</li>
      <li href="#H" onclick="Removebar()" >H</li>
      <li href="#I" onclick="Removebar()" >I</li>
      <li href="#J" onclick="Removebar()">J</li>
      <li href="#K" onclick="Removebar()">K</li>
      <li href="#L" onclick="Removebar()">L</li>
      <li href="#M" onclick="Removebar()">M</li>
      <li href="#N" onclick="Removebar()">N</li>
      <li href="#O" onclick="Removebar()">O</li>
      <li href="#P" onclick="Removebar()">P</li>
      <li href="#Q" onclick="Removebar()">Q</li>
      <li href="#R" onclick="Removebar()">R</li>
      <li href="#S" onclick="Removebar()">S</li>
      <li href="#T" onclick="Removebar()">T</li>
      <li href="#U" onclick="Removebar()">U</li>
      <li href="#V" onclick="Removebar()">V</li>
      <li href="#W" onclick="Removebar()">W</li>
      <li href="#X" onclick="Removebar()">X</li>
      <li href="#Y" onclick="Removebar()">Y</li>
      <li href="#Z" onclick="Removebar()">Z</li>
      <li  href="javascript:void(0)" onclick="Removebar()" >&times;</li>
    </div>
</div>

CodePudding user response：

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')" >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";
        document.getElementById(`${letter}-letter`).scrollIntoView();
  }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  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  id="Invisible">
    <div >
      <li href="#A" onclick="Removebar('a')" >A</li>
      <li href="#B" onclick="Removebar('b')" >B</li>
      <li href="#C" onclick="Removebar('c')" >C</li>
      <li href="#D" onclick="Removebar('d')" >D</li>
      <li href="#E" onclick="Removebar('e')" >E</li>
      <li href="#F" onclick="Removebar('f')" >F</li>
      <li href="#G" onclick="Removebar('g')" >G</li>
      <li href="#H" onclick="Removebar('h')" >H</li>
      <li href="#I" onclick="Removebar('i')" >I</li>
      <li href="#J" onclick="Removebar()">J</li>
      <li href="#K" onclick="Removebar()">K</li>
      <li href="#L" onclick="Removebar()">L</li>
      <li href="#M" onclick="Removebar()">M</li>
      <li href="#N" onclick="Removebar()">N</li>
      <li href="#O" onclick="Removebar()">O</li>
      <li href="#P" onclick="Removebar()">P</li>
      <li href="#Q" onclick="Removebar()">Q</li>
      <li href="#R" onclick="Removebar()">R</li>
      <li href="#S" onclick="Removebar()">S</li>
      <li href="#T" onclick="Removebar()">T</li>
      <li href="#U" onclick="Removebar()">U</li>
      <li href="#V" onclick="Removebar()">V</li>
      <li href="#W" onclick="Removebar()">W</li>
      <li href="#X" onclick="Removebar()">X</li>
      <li href="#Y" onclick="Removebar()">Y</li>
      <li href="#Z" onclick="Removebar()">Z</li>
      <li  href="javascript:void(0)" onclick="Removebar()" >&times;</li>
    </div>
</div>

CodePudding user response：

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>