单击浏览器后退按钮时，将用户带回上一页滚动到的位置 [英] Take User Back to Where They Scrolled to on previous page when clicking Browser Back Button

问题描述

在浏览器中按下后退按钮时，是否可以将用户带回到他们向下滚动到的页面区域?如 --- pageA 是您屏幕尺寸的两倍(因此您必须滚动以阅读更多信息).您单击页面 A 上的链接转到新页面 - 页面 B.阅读后，您在浏览器中单击返回.现在，当您返回 pageA 时，您又回到了顶部，必须向下滚动到您要继续阅读页面其余部分的位置.

Is it possible to take a user back to the area of a page where they scrolled down to when pressing the back button in a browser? As in --- pageA is double your screen size (hence you have to scroll to read more). You click a link on pageA to go to a new page - pageB. After reading you click back in browser. Now when you return to pageA you are back at the top and have to scroll down to where you were to continue reading the rest of the page.

是否有 Jquery 或 JS 的方式返回到页面中的那个点.也许与 .scrollTop() 相关?

Is there a Jquery or JS way to return to that point in the page. Maybe something with .scrollTop()?

推荐答案

如果在页面加载"事件触发后加载内容，则后退按钮不会将您带回原来的位置.因为浏览器在 'load' 事件之前滚动.

If the content is loaded after page "load" event firing, then the back button would not take you back to the position you were. Because the browser scrolls before the 'load' event.

在这种情况下，为了让浏览器记住滚动位置，您必须在导航离开之前将滚动位置和状态(已加载的内容)存储在某处.无论是在 cookie 中，还是在 url 哈希中.

To make the browser remember the scroll position in this case, you have to store the scroll position and status (what content have been loaded) somewhere before navigating away. Either in the cookie, or in the url hash.

如果pageA只是一个没有动态内容的静态页面(在'load'事件之后加载，浏览器应该在你返回时记住滚动位置.

If pageA is just a static page without dynamic content (loaded after 'load' event, the browser should remember the scroll position when you go back.

对于动态内容，至少包括两部分.一种是在单击返回"按钮时恢复页面状态，因此所有动态内容都被加载，一些扩展器被展开或折叠.另一个是滚动到那里.

For dynamic content, there at least includes two parts. One is recovering the page status when click "Back" button, so all the dynamic content is loaded, some expander are expanded or collapsed. The other is scroll to there.

第一部分取决于页面的实现方式.第二部分您可以在页面执行 onUnload 时将滚动顶部放入 cookie.例如

The first part depends on how the page is implemented. The 2nd part you can put the scroll top into the cookie when page doing onUnload. For example

$(window).unload(function() {$.cookie('scrollTop',$(window).scrollTop());});

这篇关于单击浏览器后退按钮时，将用户带回上一页滚动到的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！