jQuery 获取当前滚动位置并将其作为带有链接的变量传递?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/1022652/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get current scroll position and pass it as a variable with a link?
提问by Georg Sch?lly
I'll be honest, I'm way out of my depth here. I've created a pagination system where you click on a link it reloads the page and a certain number of list items are shown in an unordered list. When you click it again it'll reload the page and more items showing. Think how Twitter shows the tweets in your feed.
老实说,我在这里已经超出了我的深度。我创建了一个分页系统,您可以在其中单击链接重新加载页面,并且一定数量的列表项显示在无序列表中。当您再次单击它时,它会重新加载页面并显示更多项目。想想 Twitter 如何在您的提要中显示推文。
The problem is when it reloads the page it stays at the top. What I would like is for it to jump to the same position on the page it previously had.
问题是当它重新加载页面时,它会停留在顶部。我想要的是它跳到它以前拥有的页面上的相同位置。
I already have a selector for the link set up fine I just don't know how to get the current scroll position and then pass it to the new page for it to jump to.
我已经有一个用于链接的选择器设置得很好,我只是不知道如何获取当前滚动位置,然后将其传递到新页面以供跳转。
Here's my code so far:
到目前为止,这是我的代码:
jQuery(document).ready(function(){
$("a[rel=more]").live("click", function(){
//script...
});
});
Where do I go from here?
我从这里去哪里?
回答by Georg Sch?lly
Reload the items using AJAX instead of reloading the whole page.
Get and set the scroll position using
window.pageYOffset
andwindow.scrollTo(0, y)
.I'd store the position in the hash of the 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();
使用 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();
回答by Edemilson Lima
I think what you need is just to pass an HTML anchor at the end of your link. The browser will scroll automatically to the element right next to the matched anchor. Example:
我认为您需要的只是在链接末尾传递一个 HTML 锚点。浏览器将自动滚动到匹配锚点旁边的元素。例子:
<a href="page2.html#myanchor">Next page</a>
At some point in the middle of page2:
在 page2 中间的某个点:
<a name="myanchor">My item N</a>
回答by jitter
As gs said add the elements via an ajax call instead of of reloading the page.
正如 gs 所说,通过 ajax 调用添加元素而不是重新加载页面。
If you don't want to to use the jQuery.ScrollToplugin. Which supports everything related to scrolling you could ever have dreamed about
如果您不想使用jQuery.ScrollTo插件。它支持您梦寐以求的与滚动相关的所有内容
回答by ericsoco
according to @Shawn Grigson's link, pageYOffset is not supported the same across all browsers.
根据@Shawn Grigson 的链接,并非所有浏览器都支持相同的 pageYOffset。
a jQuery solution (hopefully truly cross-browser compatible, though i haven't yet tested it) for getting and setting an element's vertical scroll is scrollTop().
用于获取和设置元素垂直滚动的 jQuery 解决方案(希望真正跨浏览器兼容,尽管我还没有测试过)是scrollTop()。