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

我发现您有一个粘性导航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

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

1 个答案: