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

Posted

技术标签:

【中文标题】获取当前滚动位置并将其作为带有链接的变量传递?【英文标题】:Get current scroll position and pass it as a variable with a link? 【发布时间】:2010-11-04 14:12:13 【问题描述】:

老实说,我在这里已经超出了我的深度。我创建了一个分页系统,您单击一个链接它会重新加载页面,并且一定数量的列表项显示在无序列表中。当您再次单击它时,它将重新加载页面并显示更多项目。想想 Twitter 如何在您的提要中显示推文。

问题是当它重新加载页面时它停留在顶部。我希望它跳转到之前页面上的相同位置。

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

到目前为止,这是我的代码:

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

我从这里去哪里?

【问题讨论】:

我也在使用 AJAX 来完成这项工作,但为了做到这一点,我需要能够使用 javascript 读取 XSLT 变量。如果您愿意,可以在这里回答这个问题:***.com/questions/1022732/… 【参考方案1】:

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

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

【讨论】:

如果此列表位于可滚动的 DIV 上,如何使 DIV 的滚动条滚动到所需位置? @asabo:我不太确定,但我认为这是不可能的。您必须创建一个自定义滚动视图。 (这并不难。) 对于获取页面偏移量的跨浏览器函数,试试这个:howtocreate.co.uk/tutorials/javascript/browserwindow 向下滚动到 getScrollXY() 函数。 要拥有更多跨浏览器功能,如果您已经在使用jQuery,请使用$(window).scrollTop()$(window).scrollLeft() 获取窗口的当前滚动位置。【参考方案2】:

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

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

【讨论】:

【参考方案3】:

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

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

在page2中间的某个点:

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

【讨论】:

【参考方案4】:

根据@Shawn Grigson 的链接,并非所有浏览器都支持 pageYOffset。

用于获取和设置元素垂直滚动的 jQuery 解决方案(希望真正跨浏览器兼容,虽然我还没有测试过)是 scrollTop()。

【讨论】:

以上是关于获取当前滚动位置并将其作为带有链接的变量传递?的主要内容,如果未能解决你的问题,请参考以下文章

传递带有“this”作为参数的 shared_ptr 并将其存储在变量中

如何获取当前视图HTML源并将其作为String传递给JSF ManagedBean

如何从地图活动中获取选定的位置并将其传递给父活动?

从 URL 获取 ID 并将其存储在变量中

jQuery从顶部获取高度

没有滚动链接定位的当前导航位置