Как reset прокрутить позицию при изменении маршрута?

Я провожу свои первые пару часов с помощью Angular JS, и я пытаюсь написать СПА с ним. Тем не менее, при смене маршрута позиция прокрутки остается в текущей позиции после смены маршрутов. Это означает, что если кто-то прочитает половину текста на второй странице, этот человек окажется в середине страницы, когда два после перехода на вторую страницу. (Учитывая, что страницы одинаково длинны.)

Когда я ищу решения, я только нахожу, что люди спрашивают об обратном, т.е. они не хотят менять позицию прокрутки, как только они меняют страницы. Однако я не смог воспроизвести это. Интересно, развилось ли развитие 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>

Ответы

Ответ 1

Согласно документации ngView:

строка autoscroll (необязательно):

Чтобы ngView вызывал $anchorScroll для прокрутки окна просмотра после представление обновляется.

Итак, все, что вам нужно сделать, это изменить ваш вызов ng-view, чтобы включить автопрокрутку, например:

<div ng-view autoscroll></div>

Ответ 2

После каждого изменения маршрута на $rootScope: $routeChangeSuccess происходит событие. В основном базовом сценарии просто прослушайте это событие и reset положение прокрутки до (0,0):

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

В немного более сложном случае вы можете сохранить для каждого URL-адреса последнюю позицию перед выходом из URL-адреса - тогда вы должны прослушивать: $routeChangeStart. Очень примитивно, хранение может быть сделано на самом $rootScope, но я бы предпочел использовать JS-хэш-объект и сохранить его как простое значение angular. Если сохранение последней позиции должно быть постоянным (например, в localStorage), вы можете рассмотреть возможность использования службы angular.