jQuery: anchor 加载页面然后滚动到 div

Question

我有一个单页网站，当单击导航链接时，该网站会滚动到正确的部分 - 请参阅 http://www.cleanupbritain.org举个例子。

我现在正在扩展网站并添加一个位于子目录中的博客，我正在尝试设置博客导航以加载 www.cleanupbritain.org，然后滚动到正确的部分。这可能吗？我对 jQuery 相当陌生，因此我们将不胜感激。

这是导航链接:

<a href="http://www.cleanupbritain.org" onClick="goToByScroll('news')">News</a>

这是我编写的脚本:

<!-- ScrollTo for navigation scrolling -->
<script type="text/javascript">
jQuery(window).load(function() {
    function goToByScroll(id){
            jQuery('html,body').animate({scrollTop: $("#"+id).offset().top - 236},'slow');
    }
    function goToTop(){
            jQuery('html,body').animate({scrollTop: 0},'slow');
        }
});
</script>

我认为导航链接不正确，但我不确定需要更改哪些内容才能确保脚本在正确的时间执行？

非常感谢您的帮助，

刘易斯。

Answer 1

导航链接应为 <a href="http://www.cleanupbritain.org/#news">News</a>

现在，如果新闻 block 有 id="news" ，浏览器会自动滚动到它——这就是 anchor 的用途。如果您想要动画，那么:

<script type="text/javascript">
jQuery(window).load(function() {
    function goToByScroll(id){
       jQuery('html,body').animate({scrollTop: $("#"+id).offset().top - 236},'slow');
    }

    if(window.location.hash != '') {
        goToByScroll(window.location.hash.substr(1));        
});
</script>

也许您必须更改新闻的 block ID 以防止自动 anchor 行为，但您应该进行测试。