html - 如何在粘性导航栏中设置平滑滚动？

Question

我有一个粘性菜单有孩子。像这个模板：

<ul id="sticky">
 <li><a href="#one">One</a></li>
 <li><a href="#two">Two</a></li>
 <li><a href="#three">Three</a></li>
</ul>

页面上的 div 标签是：

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

所以我想点击项目并滚动到项目 div 但粘性导航是问题。

滚动项目后，选定的项目显示在粘性导航栏下。

我如何将偏移量设置为（滚动行为：平滑）或以任何方式解决此问题？

标签： htmlcssscrollsticky

Answer 1

我以前在我的网站上遇到过这个问题，但担心没有一点 javascript 可以解决这个问题尝试将它放在你的 js 脚本文件或 html 文件中的 javascript

$(".smooth-scroll").click(function(e) {
        let currentItem = e.target.text;
        console.log(currentItem);
        $("html, body").animate(
          {
            scrollTop:
              $($(this).attr("href")).offset().top -
              (currentItem == "Skills" ? 100 : 100)
          },
          "fast"
        );
        return false;
      });

<ul id="sticky">
 <li><a class="smooth-scroll" href="#one">One</a></li>
 <li><a class="smooth-scroll" href="#two">Two</a></li>
 <li><a class="smooth-scroll" href="#three">Three</a></li>
</ul>


<div id="one"></div>
<div id="two"></div>
<div id="three"></div>