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>

现在,如果新闻块有一个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以防止自动锚行为,但你应该测试.