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

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

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

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

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

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

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

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

19
angularjs infinite-scroll javascript scroll

3 ответов

у меня была проблема simlar некоторое время назад и придумать простое (но не элегантное решение).

когда вид изменен, я храню значение scrolltop оболочки в области. Возвращаясь назад, я снова применил это значение на wrapper.

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

изменение просмотра и хранения 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 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 вертикальное смещение прокрутки при инициализации контроллера, т. е. в $window.история.вернуться событие посадки на этой странице.

0

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

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