javascript - 如何控制 scrolltop javascript 功能？

Question

我正在使用 Pagify.js 插件，它通过使用 jquery 将多个 html 文件拉到容器 div 中来帮助创建一页网站，而无需浏览器刷新整个页面。

问题是我试图在单击链接时滚动到导航栏 div，但结果很奇怪。这是插件和 HTML jsfiddle。这是我用来滚动的代码（我不知道放在哪里）

$('html, body').animate({scrollTop:$('#nav').position().top});

http://jsfiddle.net/5y9HT/

如果我将 scrollTop 代码粘贴到 pagify.js 中的不同位置，则会发生不同的事情，其中​​没有一个行为完全正确。我正在尝试实现一种情况，如果单击链接，它将滚动到导航 div，但如果刷新浏览器则不会滚动（它应该已经存在。就像在这个网站上一样：http://www. madebysofa.com/archive/index.html

Answer 1

我认为你想要#nav 的偏移量，而不是它的位置：

$('.content').on('click', 'a', function(a){
    a.preventDefault();
    $('content').get('newPage.html');
    var nav_position = $('#nav').offset();
    console.log(nav_position);
    $(document).animate({
         scrollTop: nav_position + 'px';
    });
});

您可能仍然可以以相同的方式使用您的 position().top。

$('.content').on('click', 'a', function(a){
    a.preventDefault();
    $('content').get('newPage.html');
    var nav_position = $('#nav').position().top;
    console.log(nav_position);
    $(document).animate({
         scrollTop: nav_position + 'px';
    });
});

Answer 2

试试这个，

$('html, body').animate({scrollTop:$('#nav').offset().top}, 1000);

您也可以使用 document 而不是同时指定“html”和“body”。希望它有效。