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

如果在页面＆＃34之后加载内容;加载＆＃34;事件发射，然后后退按钮不会带你回到你的位置。因为浏览器会在“加载”之前滚动。事件

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

如果pageA只是一个没有动态内容的静态页面（在加载＆＃39;事件后加载，浏览器应该在你回去时记住滚动位置。

对于动态内容，至少包括两部分。一个是点击＆＃34;返回＆＃34;恢复页面状态。按钮，所以加载了所有动态内容，扩展或折叠了一些扩展器。另一个是滚动到那里。

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

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

Answer 3

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

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

然后在会话中存储滚动，当您单击后退时执行scrollTop(scroll)。

Answer 4

尝试使用@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 5

  //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)
  }

Answer 6

<button onclick="goBack()">Go Back</button>

<script>
function goBack() {
  window.history.back();
}
</script>

这与浏览器上的后退按钮相同

Answer 7

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

首先要防止浏览器的默认滚动恢复，以便自己处理。有关详细信息，请参阅 this article。

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 中，如果当前窗口大小与状态中存储的大小不匹配，则避免恢复滚动位置。

希望有帮助。

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

7 个答案: