如何在路线更改时重置滚动位置？答案

【问题标题】：How to reset scroll position on a route change?如何在路线更改时重置滚动位置？
【发布时间】：2014-04-01 07:48:41
【问题描述】：

我在 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>

【问题讨论】：

您可能正在寻找$anchorScroll。
我通读了。那么现在是 noop 的控制器应该得到这个锚滚动并应用它吗？抱歉，我对 Angular 很陌生。

标签： angularjs routes

【解决方案1】：

根据ngViewdocumentation：

自动滚动（可选）字符串：

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

因此，您所要做的就是更改您的 ng-view 调用以打开自动滚动，如下所示：

<div ng-view autoscroll></div>

【讨论】：

以上答案解决了我的一半问题，我也想在页面重新加载时做同样的事情。您能否指导一下如何做到这一点？
非常感谢@Matt

【解决方案2】：

每次路由更改后，$rootScope 上都会触发一个事件：$routeChangeSuccess。最基本的场景，只要监听这个事件，把滚动位置重置为(0,0)：

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

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

【讨论】：

似乎需要持续监听视口滚动，因为单击后退或前进按钮时，任何事件都会发生得太晚而无法记录偏移量。
@Srg 您的页面是完全重新加载还是 SPA？如果是后者，那么我很确定不需要脏检查。
我还没有看到一个 SPA 使用 swipes 干净地支持现在已有 1 年历史的 iOS7 bfCache 导航。问题是对页面应用任何更改都需要时间，而且根本没有。如果你还没有注意到，（拿到 iOS7+ 设备，打开一个 SPA，向下钻取，）向后滑动几乎到最后，仔细查看然后释放。当 SPA 返回之前的状态时，总会出现明显的故障。