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

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mat*_*Way 41

根据ngView文件:

autoscroll(可选)字符串:

在视图更新后,ngView是否应调用$ anchorScroll来滚动视口.

因此,您所要做的就是更改您的ng-view呼叫以启用自动滚动,如下所示:

<div ng-view autoscroll></div>

Run Code Online (Sandbox Code Playgroud)

Answer 2

art*_*iak 12

每条路线变更后没有对触发的事件$rootScope:$routeChangeSuccess.在最基本的场景中,只需听取此事件并将滚动位置重置为(0,0):

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

Run Code Online (Sandbox Code Playgroud)

在有些更先进的情况下,你可以存储,每个URL,同时将网址前的最后一个位置-那么你应该听上:$routeChangeStart为好.非常原始,存储可以在$rootScope自身上进行,但我更喜欢使用JS哈希对象并将其保持为简单的角度值.如果存储最后一个位置应该是永久性的(例如,在localStorage),那么你可以考虑使用角度服务.

归档时间：	12 年，1 月前
查看次数：	14940 次
最近记录：	6 年，6 月前