Положение прокрутки не будет reset при переходе на другую страницу после нажатия кнопки возврата

У меня проблема с прокруткой в приложении angularjs.

В настоящий момент у него есть 2 страницы: первая страница - это список клиентов, вы можете выбрать один из них и просмотреть его детали. Второй - это список компаний, он работает одинаково.

Я использую панель для навигации между ними, используя $location.path(). И приложение также имеет кнопку "Назад", используя $window.history.back().

Когда вы выбираете один из элементов в списке клиентов или компаний, а после этого, когда вы нажимаете кнопку назад, вы возвращаетесь на предыдущую страницу (список клиентов или компаний) с восстановлением положения прокрутки. Я использую стандартную функцию $window.history.back(), не реализовал ничего пользовательского.

Но здесь возникает проблема: если без прокрутки в любом направлении просто перейдите на другую страницу (в другой список элементов) позиция прокрутки не будет reset. Но если вы прокрутите его даже немного, это положение будет reset. Также, если вы не используете кнопку "Назад", все работает нормально.

Итак, вопрос: как мы можем reset прокручивать позицию при переходе на другую страницу после использования $window.history.back()?

Я также использую плагин infinite-scroll, если это имеет значение. Но даже когда я отключил его, ничего не изменилось, поэтому я думаю, что проблема связана не с плагином.

Ответ 1

У меня была проблема simlar в то время, и вышла с простым (но не элегантным решением).

При изменении вида я использую значение scrolltop оболочки в области видимости. При возвращении я снова применил это значение на обертке.

Собственно, я не помню, как он ведет себя при нажатии кнопки "Назад". Вы должны проверить это.

Изменение вида и сохранения значения scrollTop https://github.com/jedrzejchalubek/Reed/blob/master/src/app/controller/all.js#L20

angular.extend($scope.view, {
    panel: false,
    section: 'single',
    single: el,
    scrollPosition: $('#thumbs').scrollTop()
});

Возврат и повторное использование scrollTop value https://github.com/jedrzejchalubek/Reed/blob/master/src/app/directives/back-to-list.js#L14

scope.$apply(function() {
    scope.view.section = 'list';
    scope.view.panel = false;
});
$('#thumbs').scrollTop( scope.view.scrollPosition );

Проект находится в github, поэтому вы можете его сканировать. Может быть, это помогает. https://github.com/jedrzejchalubek/Reed

Ответ 2

Вы можете перехватывать события перезагрузки с помощью функций запуска при инициализации вашего контроллера, при условии, что эти контроллеры завернуты в Выражение неотложной функции. Например:

(function() {


 angular.module("pstat")
         .controller("homeCtrl", homeCtrl);

  homeCtrl.$inject = ['$log', 'dataService', 'localStorageService', '$http'];
  function homeCtrl ($log, dataService, localStorageService, $http) {
    var vm = this;
    $(document).getElementById("yourId").scrollTop(0);

  });
})()

Это заставит страницу иметь 0 вертикального сдвига прокрутки при инициализации контроллера, I.E на посадке события $window.history.back на этой странице.

Ответ 3

Это то, что я добавил в знаменитый phonecatApp из учебника AngularJS, и он работает:

    phonecatApp.run(function($rootScope, $window) {
        $rootScope.$on('$viewContentLoaded', function(){
            $(document).ready(function(){ window.scrollTo(0, 0); });
        });
    });