如果路線重新加載，如何保留滾動位置？

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的啓發。