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

问题描述

在浏览器中按后退按钮时，是否可以将用户带回到他们向下滚动的页面区域？因为--- pageA是你的屏幕尺寸的两倍（因此你必须滚动阅读更多）。单击pageA上的链接转到新页面 - pageB。阅读后，单击浏览器中的。现在当你返回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屋！