使用jQuery滚动时如何为每个锚点设置不同的偏移量

Question

我在页面上有几个部分，每个部分都指定了 sectionID。 我添加了用于滚动到锚点的 jQuery 函数，但滚动后我无法让所有锚点显示在同一位置。

我有名为健康、医学、金融、论文的部分。单击“健康”会滚动到健康部分的顶部，但单击“财务”链接会滚动到财务部分但带有偏移量。它不会停留在该部分的最顶部。

我的脚本如下。

<script type="text/javascript"> 
/* show active navigation element */
jQuery(document).ready(function () {
jQuery(document).on("scroll", onScroll);

});

//get scroll position and handle class active
function onScroll(event){
    var scrollPos = jQuery(document).scrollTop()+450;
    jQuery('#nav li a').each(function () {
        var currLink = jQuery(this);
        var refElement = jQuery(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            jQuery('#nav li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

/* activate sticky navigation */
jQuery(document).ready(function() {  
   var stickyNavTop = jQuery('#nav').offset().top;  

   var stickyNav = function(){  
   var scrollTop = jQuery(window).scrollTop();  

   if (scrollTop > stickyNavTop) {   
       jQuery('#nav').addClass('sticky');  
   } else {  
       jQuery('#nav').removeClass('sticky');   
   }  
};  
stickyNav();  

jQuery(window).scroll(function() {  
    stickyNav();  
    });  
}); 
</script>

我发现了一个类似的问题here，但我无法让它与我的代码一起使用。

如何使用我正在使用的 jQuery 控制每个锚点的滚动偏移量？

Answer 1

我发现您有一个 Sticky Navigation stickyNav();，这可能会导致您的偏移量出现问题。

为了获得正确的锚点偏移量，您必须注意将粘性导航的高度添加到滚动操作中，如下所示：

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

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top - 100
        // 100 is the sticky nav height
    }, 500);
});

更多信息请看这篇文章：Smooth scrolling when clicking an anchor link