jQuery:锚点加载页面，然后滚动到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>

现在，如果新闻块有一个id="news"，浏览器将自动滚动到它--这就是创建锚的目的。如果你想看动画，那么：

<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>

也许你将不得不改变新闻的区块id以防止自动锚定行为，但你应该测试一下。