Question

我使用$route.reload()重新加载了路径，我需要在重新加载页面之前保留相同的滚动位置。

但是，重新加载路线后，滚动位置指向顶部。

对于Instance，如果我正在使用

重新加载我的应用程序

$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的启发。

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

2 个答案: