点击浏览器后退按钮时如何让用户返回到上一页滚动到的位置？

Question

是否可以将用户带回到在浏览器中按后退按钮时向下滚动到的页面区域？

说明目标的示例：

1. pageA

   是屏幕尺寸的两倍（因此您必须滚动才能阅读更多内容）。

2. 您单击

   pageA

   上的链接即可转到新页面 -

   pageB

   。

3. 阅读完后，单击浏览器的后退按钮。

4. 当您返回到

   pageA

   时，您就回到了您正在阅读的位置。

实际上，后退按钮会返回到上一页的顶部，并且必须向下滚动到我要继续阅读页面其余部分的位置。

是否有 JQuery 或 JavaScript 方法可以返回页面中的该点？也许有

.scrollTop()

的东西？

Answer 1

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

为了让浏览器记住这种情况下的滚动位置，您必须在离开之前将滚动位置和状态（已加载的内容）存储在某处。要么在 cookie 中，要么在 url 哈希中。

如果 pageA 只是一个没有动态内容的静态页面（在“load”事件后加载，则当您返回时浏览器应该记住滚动位置。

对于动态内容，至少包括两部分。一是当单击“后退”按钮时恢复页面状态，因此加载所有动态内容，展开或折叠一些扩展器。另一个是滚动到那里。

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

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

Answer 2

您可以通过使用会话存储来做到这一点。

$(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 3

这绝对应该使用 History API 来完成，因为这是确定用户使用浏览器的后退按钮返回页面的唯一方法。

首先，你要阻止浏览器默认滚动恢复，以便自己处理。详情请参阅本文。

if ('scrollRestoration' in history) history.scrollRestoration = 'manual'

然后需要将用户离开页面时的滚动位置存储在

history.state

中。这可以在 beforeunload 上使用 history.replaceState 完成。

window.addEventListener('beforeunload', storeScrollPositionInHistoryState)

function storeScrollPositionInHistoryState() {
  // Make sure to add lastScrollPosition to the current state
  // to avoid removing other properties
  const newState = { ...history.state, lastScrollPosition: scrollY }

  // Pass the current location.href since you only want to update
  // the state, not the url
  history.replaceState(newState, '', location.href)
}

或使用 ES5

function storeScrollPositionInHistoryState() {
  var newState = Object.assign({}, history.state, { lastScrollPosition: scrollY })
  history.replaceState(newState, '', location.href)
}

最后，每当您的页面准备好滚动回之前的位置时，您都会检查

history.state.lastScrollPosition

是否已定义，如果是，则恢复滚动位置并将其从

history.state

中删除。

function restoreLastScrollPositionIfAny() {
  if (typeof history.state.lastScrollPosition !== 'number') return

  scrollTo(scrollX, history.state.lastScrollPosition)
  const cleanState = { ...history.state }
  delete cleanState.lastScrollPosition
  history.replaceState(cleanState, '', location.href)
}

还有一种边缘情况没有被涵盖：

• 用户可能在离开页面后调整了窗口大小，这可能会导致返回页面时滚动位置不正确。开发人员经常调整窗口大小，但真正的用户却不那么频繁。这就是为什么我认为它是一种边缘情况。

解决此问题的一种方法可能是将窗口大小也存储在

history.state

中，并避免在当前窗口大小与状态中存储的大小不匹配时恢复滚动位置。

希望有帮助。

Answer 4

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

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

然后将滚动存储在会话中，当您单击返回时执行

scrollTop(scroll)

.

Answer 5

在尝试了@bowen选项之后，我找到了一个更好的选项，滚动平滑，并且没有@Frits所说的问题

      $(window).scroll(function () {
        //set scroll position in session storage
        if ($(window).scrollTop() > 500)
          sessionStorage.scrollPos = $(window).scrollTop();
      });

      var init = setTimeout(function(){
         //return scroll position in session storage
         if (sessionStorage.scrollPos > 500){
            $("html").animate({ scrollTop: sessionStorage.scrollPos },2000);
          }
        },1000);
      window.onload = init;

Answer 6

  //For Angular
  //Save your scroll position once you scroll
  @HostListener('window:scroll', ['$event']) onScrollEvent($event){
    sessionStorage.scrollPos = window.scrollY
  } 

  //Scroll to the save value postion
  ngAfterViewInit(){
    window.scrollTo(0, sessionStorage.scrollPos)
  }