Question

我花了我最初的几个小时与Angular JS，我正在尝试用它写一个SPA。但是，在更改路线时，滚动位置会在更改路线后保持在当前位置。这意味着，如果有人阅读了第二页上的一半文本，则此人将在更改为第二页后的两个页面中间结束。（鉴于这些页面同样长。）

当我寻找解决方案时，我只发现人们要求相反，即他们不想在更改页面后更改滚动位置。但是，即便如此，我也未能重现。我想知道Angular JS的发展是否领先于此，我咨询的来源已经过时了。

我创建了一个演示我的问题的最小版本（只需添加两个文件sample1.html和sample2.html以及随机内容即可生效。）：

<!DOCTYPE html>
<html>
<head lang="en"><title>SPA sample</title></head>
<body data-ng-app="myApp">
<div style="position: fixed;">
  <a href="#/">Main</a>
  <a href="#/other">Tutorial</a>
</div>
<div data-ng-view=""></div>
<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.9/angular-route.min.js"></script>
<script>
    var myApp = angular.module('myApp', ['ngRoute']);
    myApp.config(function ($routeProvider) {
        $routeProvider
                .when('/', {
                    controller: 'noOp',
                    templateUrl: 'sample1.html'
                })
                .when('/other', {
                    controller: 'noOp',
                    templateUrl: 'sample2.html'
                })
                .otherwise({redirectTo: '/'});
    });
    myApp.controller('noOp', function ($scope) { });
</script>
</body>
</html>

Answer 1

根据ngView文档：

autoscroll（可选）字符串：

ngView是否应该调用$ anchorScroll来滚动视口   视图已更新。

所以你要做的就是改变你的ng-view电话来打开自动滚动，如下所示：

<div ng-view autoscroll></div>

Answer 2

每次更改路线后，都会在$rootScope：$routeChangeSuccess上触发一个事件。在最基本的情况下，只需听取此事件并将滚动位置重置为(0,0)：

$rootScope.$on("$routeChangeSuccess", function(){
     window.scrollTo(0,0);
})

在更高级的案例中，您可以为每个网址存储离开网址之前的最后位置 - 然后您应该听取：$routeChangeStart。非常原始，可以在$rootScope本身进行存储，但我更喜欢使用JS哈希对象并将其保持为简单的角度值。如果存储最后一个位置应该是永久性的（例如在localStorage中），那么您可以考虑使用角度服务。

如何重置路线更改时的滚动位置？

2 个答案: