2013-08-13 1 views
24

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

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

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

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

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

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

+0

Можете ли вы разместить больше кода, например, данные контроллера, возможно, настроить конфигурацию вашего маршрутаProvider ... и т. Д. –

ответ

14

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

+17

anchorScroll предназначен для прокрутки к элементу specefied, если вы просто хотите прокрутить вверх до страницы I подумайте, что нужно использовать $ window.scrollTo (0, 0). – nacholibre

+19

Я нашел этот ответ при поиске решения: http://stackoverflow.com/a/24549173/1578861 Добавление автопрокрутка = «истина» на мой элемент ngView работал для меня:

nostopbutton

+0

Там еще один ответ на этот вопрос что может быть более уместным для многих: http://stackoverflow.com/a/21734337/199712 –

3

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

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

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

50

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

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

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

+5

Я знаю, что это может быть очевидно для промежуточных/продвинутых разработчиков AngularJS, но не забывайте начинающих AngularJS (например, я): не забывайте добавьте ссылку '' '$ window''' на ваш контроллер, иначе это не сработает. – Nighto

+1

Как FYI, хотя в файле README ясно, что упомянутый репозиторий переместился на [https://github.com/oblador/angular-scroll](https://github.com/oblador/angular-scroll) –

3

Вы можете использовать $ 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(); 
}; 
19

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

.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

Я думаю, что это самый простой способ, только $ routeChangeStart следует изменить на $ routeChangeSuccess, таким образом эффект прокрутки будет невидимым. – nacholibre

+0

Нравится это решение. Спасибо :) Добавьте его в свой XXX.config – jasonflaherty

0

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

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

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

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

Более подробная информация здесь: https://stackoverflow.com/a/24549173/1578861

0

Вызов $ окно.scrollTo (0,0); после locationChangeSuccess события:

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

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

Смежные вопросы