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，使用scrollby的纯JS。

    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'})
        });
    });

平滑滚动导航栏固定顶部

2 个答案: