如何获取当前滚动位置并将其作为变量与链接一起传递？

Question

说实话，我在这里完全不懂。我创建了一个分页系统，在其中单击链接将重新加载页面，并在无序列表中显示一定数量的列表项。当您再次单击它时，它将重新加载页面并显示更多的项目。想象一下Twitter如何在您的动态消息中显示推文。

问题是当重新加载页面时，它会停留在顶部。我希望它能跳转到先前的页面位置。

我已经为链接设置了选择器，只是不知道如何获取当前滚动位置并将其传递给新页面以进行跳转。

以下是我的代码：

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

我该从哪里开始？

- dougoftheabaci

---

我也在处理AJAX以使其工作，但为了做到这一点，我需要能够使用JavaScript读取XSLT变量。如果您愿意，您可以在此处回答：http://stackoverflow.com/questions/1022732/setting-an-xslt-variable-as-a-javascript-variable - dougoftheabaci

Answer 1

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

2. 使用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();
   

- Georg Schölly

---

如果这个列表在一个可滚动的 DIV 上，我该如何使 DIV 的滚动条滚动到所需位置？ - ante.sabo

@asabo：我不太确定，但我认为这是不可能的。你需要创建一个自定义滚动视图。（这并不难。） - Georg Schölly

要获取页面偏移量的跨浏览器函数，请尝试访问以下网址：http://www.howtocreate.co.uk/tutorials/javascript/browserwindow。向下滚动到getScrollXY()函数。 - Shawn Grigson

如果您希望函数能够跨浏览器使用，并且已经在使用jQuery，可以使用$(window).scrollTop()和$(window).scrollLeft()来获取窗口当前滚动的位置。 - Marc

Answer 2

我认为你只需要在链接末尾添加一个HTML锚点即可。浏览器会自动滚动到与匹配的锚点相邻的元素。例如：

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

在页面2的中间某个位置：

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

- Edemilson Lima

Answer 3

GS说，通过AJAX调用添加元素而不是重新加载页面。

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

- jitter

Answer 4

根据@Shawn Grigson的链接，pageYOffset在所有浏览器中的支持程度不尽相同。 scrollTop()是一个jQuery解决方案（希望真正实现跨浏览器兼容性，尽管我还没有测试），用于获取和设置元素的垂直滚动。

- ericsoco