How to retain the scroll position if route gets reload?

Question

I reloaded the route using $route.reload() and I need to retain the same scroll position before reloads the page.

But, after reloading the route then the scroll position points at the top.

For Instance, if I'm reloading my application using,

$window.location.path();

It retains the same scroll position. But I don't want to reload the application. I just want to reload the route only and need to keeps the same scroll position.

Please give your valuable commands.

Thanks in advance.

could use `$scope.on('$destroy')` to store current `scrollTop` in a service and when controller loads again see if that service variable is set. A simple directive would likely be best — charlietfl, Dec 20 '14 at 06:31

David Gunderson · Answer 1 · 2014-12-20T09:56:18.847

I have sample code posted here AngularJsScrollPersisterDemo

The code works for me when I host the files in a website. The magic is really done in the directive and the service.

directive:

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

The directive sets the scrollTop of the div via the injected scrollPersisterService when it is destroyed, such as by a $route.reload(). Upon reload, the directive reads the scrollTop value from the scrollPersisterService and sets it as the scrollTop of the div via JavaScript.

See my github repository I linked for the full example. I have tested this code in the latest version of Chrome and it works great.

score 0 · Answer 2 · edited May 23 '17 at 11:51

You can set a custom state param that would tell your controller where to scroll the page to.

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

Inspired by this answer.

How to retain the scroll position if route gets reload?

2 Answers2