Как сохранить положение прокрутки, если маршрут загружается?

Question

Я перезагрузил маршрут, используя $route.reload(), и мне нужно сохранить ту же позицию прокрутки, прежде чем перезагружать страницу.

Но после перегрузки маршрута позиция прокрутки указана вверху.

Например, если я перезагрузки моего приложения, используя,

$window.location.path();

Он сохраняет ту же позицию прокрутки. Но я не хочу перезагружать приложение. Я просто хочу только перезагрузить маршрут и сохранить ту же позицию прокрутки.

Пожалуйста, сообщите вашими ценными командами.

Заранее спасибо.

Answer 1

У меня есть пример кода, размещенные здесь AngularJsScrollPersisterDemo

код работает для меня, когда я разместить файлы на веб-сайте. Магия действительно выполняется в директиве и служении.

директива:

(function (angular) { 
    "use strict"; 

    angular.module("ScrollPersisterApp").directive("scrollPersister", ["scrollPersisterService", scrollPersister]); 

    function scrollPersister(scrollPersisterService) { 
     return { 
      restrict: "A", 
      link: function (scope, element, attributes) { 
       element[0].scrollTop = scrollPersisterService.GetScrollTop(); 

       scope.$on('$destroy', function() { 
        scrollPersisterService.SetScrollTop(element[0].scrollTop); 
       }); 
      } 
     }; 
    } 
})(angular); 

директива устанавливает scrollTop в DIV с помощью закачиваемой scrollPersisterService, когда он будет уничтожен, например, с помощью $ route.reload(). После перезагрузки директива считывает значение scrollTop из scrollPersisterService и устанавливает его как scrollTop div с помощью JavaScript.

См. Мой репозиторий github, который я связал для полного примера. Я тестировал этот код в последней версии Chrome, и он отлично работает.

Answer 2

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

angular.module("app").controller('MyController', function($scope, $state, $stateParams, $timeout) { 
    if($stateParams.scrollY) { 
    $timeout(function() { 
     window.scrollTo(0, $stateParams.scrollY); 
    }); 
    } 
    $scope.reloadRoute = function(){ 
    params = angular.copy($stateParams); 
    params.scrollY = window.scrollY; 
    $state.transitionTo($state.current, params, { 
     reload: true, 
     inherit: false, 
     notify: true 
    }); 
    } 
}); 

Вдохновленный this answer.