AngularJS + Safari: принудительно перейдите на страницу вверх, когда страницы переключаются

У меня есть странное поведение прокрутки только с сафари, использующее AngularJS.

Всякий раз, когда пользователь перелистывает страницы, страницы изменяются, как если бы они были AJAX. Я понимаю, что они находятся в AngualrJS, но в результате поведение браузера не прокручивается вверх, когда пользователь переключает страницы.

Я пытался заставить браузер прокручивать вверх, всякий раз, когда используется новый контроллер, но он ничего не делает.

Я запускаю следующую JS в верхней части каждого контроллера:

document.body.scrollTop = document.documentElement.scrollTop = 0;

Это также ошибка Safari, каждый другой браузер прокручивается вверх, когда страница меняется. Кто-нибудь сталкивался с подобной проблемой или думал о лучшем способе ее решения?

Ответы

Ответ 1

Вы пытались использовать $anchorScroll()? он документировал здесь.

Ответ 2

$window.scrollTo(0,0) будет прокручиваться до верхней части страницы.

Я просто нашел красивый плагин (чистый angularJS), который также поддерживает анимацию:

https://github.com/durated/angular-scroll

Ответ 3

вы можете использовать это:

.run(["$rootScope", "$window", '$location', function($rootScope, $window,  $location) {

    $rootScope.$on('$routeChangeStart', function(evt, absNewUrl, absOldUrl){
        $window.scrollTo(0,0);    //scroll to top of page after each route change
}}])

или для переключателей табуляции вы можете использовать $window.scrollTo(0,0); в вашем контроллере

Ответ 4

У меня такая же проблема при использовании AngularJS в приложении Cordova. В обычном браузере или на Android у меня нет проблем, но на ios я получаю такое же поведение, как описано Нилом.

Документация AngularJS на $anchorScroll не так уж велика, поэтому я решил опубликовать эту ссылку, которая помогла мне больше:

http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.html

Ответ 5

Вы можете использовать $anchorScroll

$scope.gotoTop = function (){
  // set the location.hash to the id of
  // the element you wish to scroll to.
  $location.hash('top');

  // call $anchorScroll()
  $anchorScroll();
};

Ответ 6

Как @nonstopbutton, добавив autoscroll="true" в мой элемент ngView, тоже работал у меня. Я упоминаю об этом здесь, потому что это был комментарий к ответу, и было нелегко увидеть его ответ.

Дополнительная информация здесь: fooobar.com/questions/26786/...

Ответ 7

У меня была аналогичная проблема с Chrome. Тем не менее, я не знаю, вызывает ли какая-либо конкретная внешняя библиотека эта проблема или нет.

Однако я написал этот фрагмент кода на уровне приложения, и он работает.

 $rootScope.$on('$viewContentLoaded', function(){
                $window.scrollTo(0, 0);
            });

Ответ 8

Вызов $window.scrollTo(0,0); после locationChangeSuccess:

$rootScope.$on("$locationChangeSuccess",
function(event, current, previous, rejection) {
  $window.scrollTo(0,0);
});

Ответ 9

В контроллере вы можете фактически отбросить $ из window и просто поместить window.scrollTo(0,0);, не вводя $window в контроллер. Это отлично поработало для меня.