导航栏固定顶部，可平滑滚动

Question

i have a little question. I use smooth-scroll,its perfect... but when i use a navbar fixed top? My problem is when i click on link the anchor div its under the navbar. The navbar have height 154px and the code are simplyfy to this:

<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>

how can I lower my anchor anchor point?

Answer 1

I use this code for smooth scrolling:

$(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;
         });
     });
 });

fund on http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery . If you change the $target.offset().top - 80 with the height of your navbar you do the trick.

Answer 2

The code below works fine for me. No jquery, pure JS using 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'})
        });
    });