jQuery，点击添加班级抵消49px

Question

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

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

$('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

它发生是因为在博客文章中，链接是ACTUAL链接，这意味着它们会更改页面，导致对服务器的完整请求以及所有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); 
    } 
}); 

如果你想让它从顶部滚动，添加：$('html, body').animate({scrollTop: 0},0);的第一件事就是if语句。

---

为了改善进一步

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

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