我想在菜单中单击时滚动或指向该字母表

Question

菜单和字母选择

在此项目中，用户可以通过单击菜单中列出的字母来搜索特定字母的单词。

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>

Answer 1

编辑 - 修复向上滚动问题

我们无法正确获取您的项目的位置，因为您使用的是相对位置。相反，我们将使用更安全的版本 - 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();

现在它应该可以完美运行了（我还更改了下面的 fiddle 以供您查看）。

您实际上已经非常接近在您当前的实现中解决它了！您应该在 removeBar() 函数中添加一个变量来保存所选字母，并在选择其 ID 时使用 scrollIntoView。

让字母 A 在其 <h2> 标签上有 ID "a-letter"。要将其滚动到视图中，您应该在 A 按钮 onClick 事件上调用的函数中添加字母 'A'，即

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

然后，在您的 removeBar() 函数中声明括号内的变量，removeBar(letter)。

现在我们可以抓到id了，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>

Answer 2

这里有一些便宜的滚动。

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>

我想在菜单中单击时滚动或指向该字母表

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

html

javascript

css

dom

function

菜单和字母选择

⚠️Important thing test it on full screen

我想要的是单击菜单列表中的字母，然后屏幕应指向或滚动到我单击的字母。

编辑 - 修复向上滚动问题