Das Ändern der Route scrollt auf der neuen Seite nicht nach oben

Ich habe ein unerwünschtes Verhalten festgestellt, zumindest für mich, wenn sich die Route ändert. In Schritt 11 des Tutorials http://angular.github.io/angular-phonecat/step-11/app/#/phones
Sie können die Liste der Telefone sehen. Wenn Sie nach unten scrollen und auf eine der neuesten klicken, können Sie sehen, dass die Schriftrolle nicht oben ist, sondern eher in der Mitte.

Ich habe das auch in einer meiner Apps gefunden und mich gefragt, wie ich das nach oben scrollen kann. Ich kann es manuell tun, aber ich denke, dass es einen anderen eleganten Weg geben sollte, den ich nicht kenne.

Gibt es also eine elegante Möglichkeit, nach oben zu scrollen, wenn sich die Route ändert?

Das Problem ist, dass Sie ngView behält die Bildlaufposition beim Laden einer neuen Ansicht bei. Sie können anweisen $anchorScroll um “im Ansichtsfenster zu scrollen, nachdem die Ansicht aktualisiert wurde” (die Dokumente sind etwas vage, aber scrollen bedeutet hier nach oben scrollen der neuen Ansicht).

Die Lösung ist hinzuzufügen autoscroll="true" zu Ihrem ngView-Element:

<div class="ng-view" autoscroll="true"></div>

Setzen Sie einfach diesen Code zum Ausführen ein

$rootScope.$on("$routeChangeSuccess", function (event, currentRoute, previousRoute) {

    window.scrollTo(0, 0);

});

Dieser Code hat bei mir hervorragend funktioniert. Ich hoffe, er funktioniert auch bei Ihnen. Alles, was Sie tun müssen, ist, einfach $anchorScroll in Ihren Run-Block einzufügen und die Listener-Funktion auf den RootScope anzuwenden, wie ich es im folgenden Beispiel getan habe.

 angular.module('myAngularApp')
.run(function($rootScope, Auth, $state, $anchorScroll){
    $rootScope.$on("$locationChangeSuccess", function(){
        $anchorScroll();
    });

Hier ist die Aufrufreihenfolge des Angularjs-Moduls:

1. app.config()
2. app.run()
3. directive's compile functions (if they are found in the dom)
4. app.controller()
5. directive's link functions (again, if found)

LAUFBLOCK werden ausgeführt, nachdem der Injektor erstellt wurde, und werden verwendet, um die Anwendung zu starten

$anchorScroll()

und Sie können jetzt sehen, dass der Bildlauf mit der neuen gerouteten Ansicht nach oben beginnt 🙂

Nach ein oder zwei Stunden des Ausprobierens jeder Kombination von ui-view autoscroll=true, $stateChangeStart, $locationChangeStart, $uiViewScrollProvider.useAnchorScroll(), $provide('$uiViewScroll', ...)und viele andere konnte ich Scroll-to-top-on-new-page nicht wie erwartet zum Laufen bringen.

Das war letztendlich das, was für mich funktioniert hat. Es erfasst pushState und replaceState und aktualisiert die Bildlaufposition nur, wenn zu neuen Seiten navigiert wird (Zurück-/Vorwärts-Schaltflächen behalten ihre Bildlaufpositionen bei):

.run(function($anchorScroll, $window) {
  // hack to scroll to top when navigating to new URLS but not back/forward
  var wrap = function(method) {
    var orig = $window.window.history[method];
    $window.window.history[method] = function() {
      var retval = orig.apply(this, Array.prototype.slice.call(arguments));
      $anchorScroll();
      return retval;
    };
  };
  wrap('pushState');
  wrap('replaceState');
})

Hier ist meine (scheinbar) robuste, vollständige und (ziemlich) prägnante Lösung. Es verwendet den minifikationskompatiblen Stil (und den Zugriff angle.module(NAME) auf Ihr Modul).

angular.module('yourModuleName').run(["$rootScope", "$anchorScroll" , function ($rootScope, $anchorScroll) {
    $rootScope.$on("$locationChangeSuccess", function() {
                $anchorScroll();
    });
}]);

PS Ich habe festgestellt, dass das Autoscroll-Ding keine Auswirkung hatte, ob auf true oder false gesetzt.

Mit dem UI-Router von anglejs mache ich Folgendes:

    .state('myState', {
        url: '/myState',
        templateUrl: 'app/views/myState.html',
        onEnter: scrollContent
    })

Mit:

var scrollContent = function() {
    // Your favorite scroll method here
};

Es schlägt auf keiner Seite fehl und ist nicht global.

FYI für alle, die auf das im Titel beschriebene Problem stoßen (so wie ich), der auch die verwendet AngularUI-Router Plugin…

Wie in dieser SO-Frage gestellt und beantwortet, springt der Angular-UI-Router zum Ende der Seite, wenn Sie die Route ändern.
Können Sie nicht herausfinden, warum die Seite unten geladen wird? Angular UI-Router Autoscroll-Problem

Wie in der Antwort angegeben, können Sie dieses Verhalten jedoch ausschalten, indem Sie sagen autoscroll="false" auf Ihrem ui-view.

Zum Beispiel:

<div ui-view="pagecontent" autoscroll="false"></div>
<div ui-view="sidebar" autoscroll="false"></div> 

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view