Question

我会说实话，我离开了我的深度。我创建了一个分页系统，您点击它重新加载页面的链接，并在无序列表中显示一定数量的列表项。当您再次单击它时，它将重新加载页面并显示更多项目。想想Twitter如何在您的Feed中显示推文。

问题是当它重新加载它保持在顶部的页面时。我想要的是它跳到以前的页面上相同的位置。

我已经有一个链接设置的选择器很好我只是不知道如何获取当前滚动位置然后将其传递给新页面以便跳转到。

到目前为止，这是我的代码：

jQuery(document).ready(function(){
    $("a[rel=more]").live("click", function(){
        //script...
    });
});

我从哪里开始？

Answer 1

使用AJAX重新加载项目，而不是重新加载整个页面。

使用window.pageYOffset和window.scrollTo(0, y)获取并设置滚动位置。

我将位置存储在URL的哈希值中：

// after loading the document, scroll to the right position
// maybe location.hash has to be converted to a number first
$(document).ready(function() {
    window.scrollTo(0, location.hash);
});

// I'm not quite sure if reload() does preserve the hash tag.
location.hash = window.pageYOffset;
location.reload();

Answer 2

正如gs所说，通过ajax调用添加元素而不是重新加载页面。

如果您不想使用jQuery.ScrollTo插件。它支持与你曾梦寐以求的滚动相关的所有内容

Answer 3

我认为您需要的只是在链接的末尾传递HTML锚点。浏览器将自动滚动到匹配锚点旁边的元素。例如：

<a href="page2.html#myanchor">Next page</a>

在第2页中间的某个时刻：

<a name="myanchor">My item N</a>

Answer 4

根据@Shawn Grigson的链接，所有浏览器都不支持pageYOffset。

一个jQuery解决方案（希望真正的跨浏览器兼容，但我还没有测试过）获取和设置元素的垂直滚动是scrollTop()。

获取当前滚动位置并将其作为带链接的变量传递？

4 个答案: