Как сохранить позицию прокрутки прокручиваемой области при нажатии кнопки возврата?

Ответ 1

Во время разгрузки страницы найдите позицию прокрутки и сохраните ее в локальном хранилище. Затем во время загрузки страницы проверьте локальное хранилище и установите эту позицию прокрутки. Предполагая, что у вас есть элемент div с id element. В случае, если это для страницы, пожалуйста, измените селектор:)

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

Ответ 2

Если кнопка "Назад" представляет собой кнопку возврата назад к истории window.history.back() Тогда то, что вы ищете, является функциональностью браузера по умолчанию. Поэтому вам не о чем беспокоиться.

Если ваша обратная кнопка фактически указывает на какой-либо URL-адрес в вашем приложении по ссылке или форме, тогда вы должны позаботиться об этом вручную.

Для решения вы можете использовать файлы cookie, чтобы сохранить значение прокрутки страницы. Каждый раз, когда пользователь прокручивает страницу, сохраните значение прокрутки для этой страницы в файл cookie. Дополнительная работа применяется к ручному управлению файлами cookie.

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

Это значение cookie может использоваться для установки значения прокрутки страницы при посещении страницы.

window.scroll(0,cookievalue);

Ответ 3

У меня была та же проблема с простым пользовательским интерфейсом, состоящим из фиксированного 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 сохраняется в объекте состояния внутри объекта истории браузера. После нажатия кнопки "Назад" в событии готовности документа позиция прокрутки div восстанавливается до значения, полученного из объекта history.state.

Это решение должно работать для обратной навигации по сколь угодно длинной цепочке ссылок.

Документация здесь: https://developer.mozilla.org/en-US/docs/Web/API/History_API

Ответ 4

Я думаю, что мы должны сохранять данные прокрутки на странице, также мы должны использовать хранилище сеансов вместо локального хранилища, поскольку сохранение сеанса влияет только на текущую вкладку, в то время как локальное хранилище совместно используется для всех вкладок и окон одного и того же происхождения

$(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));
            }
        });