滚动到带有粘性导航栏的元素的按钮，如何？答案

【问题标题】：Button that scrolls to an element with a sticky navbar, how?滚动到带有粘性导航栏的元素的按钮，如何？
【发布时间】：2020-01-15 10:50:44
【问题描述】：

所以基本上我正在制作一个投资组合网站。在这个网站上，我想要一个粘性导航栏，当你滚动它时它会保持原位。现在，导航栏中的按钮也应该在单击时滚动到链接到该按钮的元素。问题是因为导航栏在那里，它每次滚动有点太远，我不知道要解决这个问题。

我尝试了多种方法，首先我尝试这样做： <a href="#elementInQuestion"> 这将滚动到正确的元素，但太远了，因为导航栏在那里。

其次，我尝试以更 JavaScript 的方式进行操作。所以这个的 html 会是这样的：

<li id="projectsBtn" onclick="scrollTime();">Projecten</li>

然后是javascript：

function scrollTime(){
  location.href = "#";
  location.href = "#projects";
  window.scrollBy(0, -108);
}

现在这样做是它否定了 javascript 函数中的前 2 行，并且只向上滚动了 108 个像素。当我删除 scrollBy 方法时，页面会滚动到#projects div，但它不会先滚动到元素，然后再向上滚动一点，因为我想要它到这里。

它应该滚动到有问题的元素，然后再向上滚动 108 个像素（因为那是导航栏的高度）

如何使导航栏中的按钮在单击时始终滚动到正确的位置？因为我完全迷失在这里了。

如果您需要有关导航栏外观和内容的完整代码，请询问。

【问题讨论】：

标签： javascript html navbar sticky

【解决方案1】：

如果我理解正确，您需要通过单击导航栏中的按钮平滑滚动到部分。你可以在没有 javascript 的情况下做到这一点。

<body> 
<div class="container">
 <div class="navbar">
    <div class="btn">
      <a href="#about>ABOUT</a>
    </div>
    <div class="btn">
      <a href="#price-list>PRICE</a>
    </div>
  </div>
  <section id="about">
    <h1>About</h1>
  </section>
  <section id="price-list">
    <h1>Price list</h1>
  </section>
</div>
</body>

CSS

.navbar {
    position: fixed;
    top: 0;
    z-index: 1;
    display: flex;
    width: 100%;
    height: 70px;
    background: rgba(0,0,0,0.9);
}


.container {
    height: 100%;
    width: 100% !important;

/* CSS Scroll stuff */

    overflow-y: scroll;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}
body{
    height:100vh;
    overflow: hidden;
}

【讨论】：

我尝试将这段代码放入单独的文档中以隔离它并查看它是否有效，但仍然存在问题，当您单击按钮时，它会滚动到我想要的位置，导航栏位于您想要的位置之上。你有一个可行的例子吗？