jQuery，点击添加类偏移49px

Question

在我的单页网站上，我使用滚动到网站不同部分的滚动到功能。

有一个固定的导航，偏移 49 像素，因此它可以完美地落在该部分。

$('nav a').click(function() {
    $('html, body').animate({scrollTop: ($(this.hash).offset().top - 49)}, 1800,
        function() {}
    );
    return false;
});

但我在网站上有一个博客。所以我想要发生的是当我点击博客中的固定导航时，它会将导航偏移 49px，目前它不会重新调整偏移量。这个我试过了，还是不行。

$('nav a.secondary-link').click(function(event) {
    $('html, body').animate({scrollTop: ($(this.hash).offset().top - 49)}, 1800,
        function() {}
    );
    return false;
});

你可以在这里看到我的工作：如果你先查看新闻页面，你会注意到该部分无法识别 49px 偏移量。

http://aspe.fishtankcreative.co.uk/newcastle-falcons/blog/falcons-to-support-primary-school-sport-with-new-initiative.php

http://aspe.fishtankcreative.co.uk/newcastle-falcons/

请帮忙。谢谢

Answer 1

发生这种情况是因为在博客文章中，链接是实际链接，这意味着它们会更改页面，从而导致对服务器的完整请求并重新加载所有 Javascript。当下一页打开时，点击事件就消失了，这是您要滚动的地方。幸运的是，我们得到了一个哈希，它给了我们一个钩子，我们可以用它来制作动画。

这应该为你做:)

$(document).ready(function(){
    var idOfSection = window.location.hash.substring(1);
    var $sectionToScrollTo = $('#'+idOfSection);
    if($sectionToScrollTo.length > 0){
        var offset = $sectionToScrollTo.offset().top-49; 
        $('html, body').animate({scrollTop: offset },1800);
    }
});

如果您希望它从顶部滚动，请在 if 语句中添加：$('html, body').animate({scrollTop: 0},0); 作为第一件事。

---

进一步改进

$(document).ready(function(){
    var sectionId = window.location.hash;
    scrollToSection(sectionId);

    $('body').on('click', 'nav a', function(){
        var secId = this.hash;
        scrollToSection(secId);
    }
});

function scrollToSection(sectionId){
    var $sectionToScrollTo = $(sectionId);
    if($sectionToScrollTo.length > 0){
        var offset = $sectionToScrollTo.offset().top-49; 
        $('html, body').animate({scrollTop: offset },1800);
    }
}

请注意，我没有测试第二个代码示例。