javascript - 导航栏固定顶部平滑滚动

Question

我有一个小问题。我使用平滑滚动，它很完美......但是当我使用导航栏固定顶部时？我的问题是当我点击导航栏下的锚 div 链接时。导航栏的高度为 154px，代码很简单：

<header id="navbar" style="position: fixed; right: 0; left: 0; z-index: 1; height: 154px;">
    <a href="#anch1">Anchor 1</a>
    <a href="#anch2">Anchor 2</a>
</header>
<div id="anch1">...</div>
<div id="anch2">...</div>

如何降低我的锚点？

Answer 1

我使用此代码进行平滑滚动：

$(document).ready(function () {
     $('a[href^="#"]').on('click', function (e) {
         e.preventDefault();

         var target = this.hash,
             $target = $(target);

         $('html, body').stop().animate({
             'scrollTop': $target.offset().top - 80
         }, 900, 'swing', function () {
             window.location.hash = target;
         });
     });
 });

http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery上的基金。如果您将 $target.offset().top - 80 更改为导航栏的高度，您就可以做到这一点。

Answer 2

下面的代码对我来说很好。没有 jquery，纯 JS 使用 scrollby。

    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            var node = document.querySelector(this.getAttribute('href'));
            let item = node;
            //this is the parent container, overflow wrapper
            let wrapper = document.querySelector('#wr-page');
            let count = item.offsetTop - wrapper.scrollTop ; 
            wrapper.scrollBy({top: count, left: 0, behavior: 'smooth'})
        });
    });