单击"浏览器后退"按钮,将用户返回到上一页滚动到的位置

Question

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

是否有Jquery或JS方法返回到页面中的那一点.也许是.scrollTop()的东西？

Answer 1

您可以使用会话存储来完成此操作.

$(window).scroll(function () {
  //set scroll position in session storage
  sessionStorage.scrollPos = $(window).scrollTop();
});
var init = function () {
   //return scroll position in session storage
   $(window).scrollTop(sessionStorage.scrollPos || 0)
};
window.onload = init;

Answer 2

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

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

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

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

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

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

Answer 3

您可以使用以下代码来检测滚动位置。

 $(window).scroll(function (event){
    var scroll = $(window).scrollTop();
    // Do something
 });

然后将滚动存储在会话中，然后单击“返回” scrollTop(scroll)。