如果路线重新加载，如何保留滚动位置？

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

的指令设置经由注入scrollPersisterService的div scrollTop的，当它被破坏，例如通过$ route.reload（）。重载时，该指令从scrollPersisterService读取scrollTop值，并通过JavaScript将其设置为div的scrollTop。

查看我的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的启发。