按下后退按钮时，如何保持可滚动区域的滚动位置

在页面卸载过程中，获取滚动位置并将其存储在本地存储器中。然后在页面加载过程中，检查本地存储并设置滚动位置。假设您有一个id为element的div元素。如果是页面，请更改选择器：）

$(function() {
   $(window).unload(function() {
      var scrollPosition = $("div#element").scrollTop();
      localStorage.setItem("scrollPosition", scrollPosition);
   });
   if(localStorage.scrollPosition) {
      $("div#element").scrollTop(localStorage.getItem("scrollPosition"));
   }
});

我认为我们应该保存每页的滚动数据，而且我们应该使用会话存储而不是本地存储，因为会话存储只影响当前选项卡，而本地存储在相同来源的的所有选项卡和窗口之间共享

$(function () {
            var pathName = document.location.pathname;
            window.onbeforeunload = function () {
                var scrollPosition = $(document).scrollTop();
                sessionStorage.setItem("scrollPosition_" + pathName, scrollPosition.toString());
            }
            if (sessionStorage["scrollPosition_" + pathName]) {
                $(document).scrollTop(sessionStorage.getItem("scrollPosition_" + pathName));
            }
        });

我在一个简单的用户界面上遇到了同样的问题，该界面由一个固定菜单div和一个滚动文档div组成（下面的代码示例中为"pxeMainDiv"）。以下解决方案适用于Chrome 47.0.2526.106 m和Firefox 43.0.3。（我的应用程序是内部使用的，我不需要满足旧版本的IE）。

$(document).ready(function(){
    if (history.state) {
       $("#pxeMainDiv").scrollTop(history.state.data);
    }
    $("#pxeMainDiv").scroll(function() {
       var scrollPos = $("#pxeMainDiv").scrollTop();
       var stateObj = { data: scrollPos };
       history.replaceState(stateObj, "");
    });
});

在div滚动事件中，div的滚动位置存储在浏览器历史对象内的state对象中。在文档就绪事件中，按下Back按钮后，div的滚动位置将恢复为从history.state对象检索到的值。

这个解决方案应该适用于任意长的链接链的反向导航。

此处的文档：https://developer.mozilla.org/en-US/docs/Web/API/History_API

对于来自react或类似于react路由器的任何人，这里有两个简单的功能：

export function saveScrollPosition(context: any) {
  let path = context.router.route.location.pathname;
  let y = window.scrollY;
  sessionStorage.setItem("scrollPosition_" + path, y.toString());
}
export function restoreScrollPosition(context: any) {
  let path = context.router.route.location.pathname;
  let y = Number(sessionStorage.getItem("scrollPosition_" + path));
  window.scrollTo(0, y);
}

用户SD指出，当使用window.history.back()时，这实际上是默认的浏览器功能。

在我目前正在建设的一个网站上，我想把公司的标志反向链接到索引页面。由于jQuery 3，$(window).unload(function()应该重写为$(window).on('unload', function()。我的代码如下（使用Kirby CMS的php语法）：

<?php if ($page->template() == 'home'): ?>
<script>
$(function() {
 $(window).on("unload", function() {
    var scrollPosition = $(window).scrollTop();
    localStorage.setItem("scrollPosition", scrollPosition);
 });
 if(localStorage.scrollPosition) {
    $(window).scrollTop(localStorage.getItem("scrollPosition"));
 }
});
</script>

如果后退按钮是一种历史后退按钮window.history.back()，那么您想要的是默认的浏览器功能。所以你不必担心。

如果你的后退按钮实际上通过链接或表单指向了应用程序中的某个URL，那么你必须手动处理。

对于解决方案，您可以使用cookie来存储页面滚动值。每次用户在您的页面上滚动时，请将该页面的滚动值保存到cookie中。额外的工作应用于手动cookie管理。

window.onScroll = function(){
    document.cookie="pageid=foo-"+window.scrollY+";";
}

此cookie值可用于设置页面访问时页面的滚动值。

window.scroll(0,cookievalue);

使用History api，您可以使用scrollRestoration并停止浏览器重置滚动位置。

请在此处阅读。https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration

/*使用以下代码恢复单个项目的滚动位置，并将焦点设置为上次单击的项目。*/

(function ($)
{
    if (sessionStorage)
        $.fn.scrollKeeper = function (options)
        {
            var defauts =
            {
                key: 'default'
            };
            var params = $.extend(defauts, options);
            var key = params.key;
            var $this = $(this);
            if (params.init === true)
            {
                var savedScroll = sessionStorage.getItem(key);
                if (typeof savedScroll != 'undefined')
                {
                    var int_savedScroll = parseInt(savedScroll);
                    if (int_savedScroll > 0)
                        $this.scrollTop(int_savedScroll);
                    setTimeout(function ()
                    {
                        var selectorFocus = sessionStorage.getItem(key + "-focus");
                        if (selectorFocus && selectorFocus != "")
                            $(document.querySelector(selectorFocus)).focus();
                    }, 100, key);
                }
            }
            window.addEventListener("beforeunload", function () 
            {
                sessionStorage.setItem(key, $this.scrollTop());
                if (document.activeElement)
                {
                    var selectorFocus = elemToSelector(document.activeElement);
                    if (selectorFocus)
                        sessionStorage.setItem(key + "-focus", selectorFocus);
                    else
                        sessionStorage.setItem(key + "-focus", "");
                }
                else
                    sessionStorage.setItem(key + "-focus", "");
            });
        };

    function elemToSelector(elem)   /* written by Kévin Berthommier */
    {
        const {
            tagName,
            id,
            className,
            parentNode
        } = elem;
        if (tagName === 'HTML') return 'HTML';
        let str = tagName;
        str += (id !== '') ? `#${id}` : '';
        if (className)
        {
            const classes = className.split(/'s/);
            for (let i = 0; i < classes.length; i++)
            {
                if(typeof classes[i] === 'string' && classes[i].length > 0)
                    str += `.${classes[i]}`;
            }
        }
        let childIndex = 1;
        for (let e = elem; e.previousElementSibling; e = e.previousElementSibling)
        {
            childIndex += 1;
        }
        str += `:nth-child(${childIndex})`;
        return `${elemToSelector(parentNode)} > ${str}`;
    }
})(jQuery);

/*用法：

$（'#tab1div'）.scrollKeeper（｛key:'uniq-key1'，init:true｝）；

如果您不需要恢复滚动位置（例如重新启动），并且只需要保存滚动位置以备下次使用，请使用：

$（'#tab1div'）.scrollKeeper（｛key:'uniq-key1'，init:false}）；*/