web-dev-qa-db-fra.com

AngularJS + Safari: force la page à défiler en haut lorsque les pages changent

J'ai un comportement de défilement étrange, réservé aux safaris, avec AngularJS.

Chaque fois que l'utilisateur bascule d'une page à l'autre, les pages sont modifiées comme s'il s'agissait d'AJAX. Je comprends qu’ils sont en AngualrJS, mais le comportement qui en résulte est que le navigateur ne fait pas défiler vers le haut lorsque l’utilisateur change de page.

J'ai essayé de forcer le navigateur à faire défiler le haut chaque fois qu'un nouveau contrôleur est utilisé, mais il ne semble rien faire.

J'exécute le JS suivant au sommet de chaque contrôleur:

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

Il s’agit également d’un bogue réservé à Safari. Tous les autres navigateurs font défiler la page vers le haut lorsque la page change. Quelqu'un a-t-il rencontré un problème similaire ou a-t-il pensé à un meilleur moyen de le résoudre?

angularjssafari
24
Neil

Avez-vous essayé d'utiliser $ anchorScroll ()? c'est documenté ici .

14
The WebMacheter

$window.scrollTo(0,0) fera défiler vers le haut de la page.

Je viens de trouver un plugin Nice (pure angularJS) qui supporte les animations: 

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

50
Alex C

vous pouvez utiliser ceci:

.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
}}])

ou pour les commutateurs de tabulation, vous pouvez utiliser $ window.scrollTo (0,0); dans votre contrôleur

19
danikoren

J'ai eu le même problème en utilisant AngularJS dans une application Cordova. Dans un navigateur normal ou sur Android, je n'ai aucun problème, mais sur ios, j'obtiens le même comportement que celui décrit par Neil. 

La documentation d'AngularJS sur $ anchorScroll n'est pas terrible, alors j'ai pensé à poster ce lien qui m'a beaucoup aidé:

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

3
Nico

Vous pouvez utiliser $ 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();
};
3
Fizer Khan

Comme @nonstopbutton dit, ajouter autoscroll="true" à mon élément ngView a également fonctionné pour moi. Je mentionne cela ici parce que c'était un commentaire à une réponse et il n'était pas facile de voir sa réponse.

Plus d'informations ici: https://stackoverflow.com/a/24549173/1578861

2
ilovemedia

Dans le contrôleur, vous pouvez réellement supprimer le $ de window et simplement mettre window.scrollTo(0,0); sans avoir à injecter $window dans le contrôleur. Cela a très bien fonctionné pour moi. 

0
AAW238

Appelez $ window.scrollTo (0,0); after locationChangeSuccess event: 

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

Je voudrais un problème similaire avec Chrome. Cependant, je ne sais pas si une bibliothèque externe spécifique est à l'origine de ce problème ou autrement.

Cependant, j'ai écrit ce morceau de code au niveau de l'application et cela fonctionne.

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