Wenn Sie die Route ändern, wird auf der neuen Seite nicht nach oben gescrollt

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

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

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

Das Problem ist, dass Ihr ngView die Bildlaufposition beibehält, wenn es eine neue Ansicht lädt. Sie können anweisen $anchorScroll, "das Ansichtsfenster nach dem Aktualisieren der Ansicht zu scrollen" (die Dokumente sind etwas vage, aber hier zu scrollen bedeutet , zum oberen Rand der neuen Ansicht zu scrollen ).

Die Lösung besteht darin autoscroll="true", Ihrem ngView-Element Folgendes hinzuzufügen :

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

Setzen Sie einfach diesen Code zum Ausführen

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

    window.scrollTo(0, 0);

});

Dieser Code hat für mich großartig funktioniert. Ich hoffe, er funktioniert auch für Sie. Alles, was Sie tun müssen, ist, $ anchorScroll in Ihren Ausführungsblock zu injizieren und die Listener-Funktion auf das 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)

RUN BLOCK wird ausgeführt, nachdem der Injektor erstellt wurde, und wird zum Kickstart der Anwendung verwendet. Wenn Sie zur neuen Routenansicht umleiten, ruft der Listener im Run-Block das auf

$ anchorScroll ()

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

Nach einer Stunde oder zwei jede Kombination aus versuchen ui-view autoscroll=true, $stateChangeStart, $locationChangeStart, $uiViewScrollProvider.useAnchorScroll(), $provide('$uiViewScroll', ...), und vielen anderen, ich konnte nicht Scroll-to-Top-on-new-Seite an der Arbeit wie erwartet.

Das hat letztendlich bei mir funktioniert. Es erfasst pushState und replaceState und aktualisiert die Bildlaufposition nur, wenn neue Seiten aufgerufen werden (die Schaltfläche "Zurück / Vorwärts" behält 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 mit der Minifizierung kompatiblen Stil (und den NAME-Zugriff (Angular.module) auf Ihr Modul).

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

PS Ich fand, dass das Autoscroll-Ding keine Auswirkung hatte, ob auf wahr oder falsch gesetzt.

Mit angularjs UI Router 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.

Zu Ihrer Information für alle, die auf das im Titel beschriebene Problem stoßen (wie ich), die auch das AngularUI Router- Plugin verwenden ...

Wie in dieser SO-Frage gestellt und beantwortet, springt der Winkel-UI-Router beim Ändern der Routen zum Ende der Seite.
Sie können nicht herausfinden, warum die Seite unten geladen wird? Angular UI-Router Autoscroll-Problem

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

Beispielsweise:

<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

Sie können dieses Javascript verwenden

$anchorScroll()

Wenn Sie einen UI-Router verwenden, können Sie diesen verwenden (on run)

$rootScope.$on("$stateChangeSuccess", function (event, currentState, previousState) {
    $window.scrollTo(0, 0);
});

Ich habe diese Lösung gefunden. Wenn Sie zu einer neuen Ansicht wechseln, wird die Funktion ausgeführt.

var app = angular.module('hoofdModule', ['ngRoute']);

    app.controller('indexController', function ($scope, $window) {
        $scope.$on('$viewContentLoaded', function () {
            $window.scrollTo(0, 0);
        });
    });

Das Setzen von autoScroll auf true war für mich nicht der Trick, daher habe ich eine andere Lösung gewählt. Ich habe einen Dienst erstellt, der sich jedes Mal einbindet, wenn sich die Route ändert, und der den integrierten Dienst $ anchorScroll verwendet, um nach oben zu scrollen. Funktioniert bei mir :-).

Bedienung:

 (function() {
    "use strict";

    angular
        .module("mymodule")
        .factory("pageSwitch", pageSwitch);

    pageSwitch.$inject = ["$rootScope", "$anchorScroll"];

    function pageSwitch($rootScope, $anchorScroll) {
        var registerListener = _.once(function() {
            $rootScope.$on("$locationChangeSuccess", scrollToTop);
        });

        return {
            registerListener: registerListener
        };

        function scrollToTop() {
            $anchorScroll();
        }
    }
}());

Anmeldung:

angular.module("mymodule").run(["pageSwitch", function (pageSwitch) {
    pageSwitch.registerListener();
}]);

Ein bisschen spät zur Party, aber ich habe jede mögliche Methode ausprobiert und nichts hat richtig funktioniert. Hier ist meine elegante Lösung:

Ich verwende einen Controller, der alle meine Seiten mit UI-Router steuert. Dadurch kann ich Benutzer, die nicht authentifiziert oder validiert sind, an einen geeigneten Ort umleiten. Die meisten Leute haben ihre Middleware in die Konfiguration ihrer App eingefügt, aber ich benötigte einige http-Anfragen, daher funktioniert ein globaler Controller für mich besser.

Meine index.html sieht aus wie:

<main ng-controller="InitCtrl">
    <nav id="top-nav"></nav>
    <div ui-view></div>
</main>

Meine initCtrl.js sieht aus wie:

angular.module('MyApp').controller('InitCtrl', function($rootScope, $timeout, $anchorScroll) {
    $rootScope.$on('$locationChangeStart', function(event, next, current){
        // middleware
    });
    $rootScope.$on("$locationChangeSuccess", function(){
        $timeout(function() {
            $anchorScroll('top-nav');
       });
    });
});

Ich habe jede mögliche Option ausprobiert, diese Methode funktioniert am besten.

Alle obigen Antworten brechen das erwartete Browserverhalten. Was die meisten Leute wollen, ist etwas, das nach oben scrollt, wenn es sich um eine "neue" Seite handelt, aber zur vorherigen Position zurückkehrt, wenn Sie über die Schaltfläche "Zurück" (oder "Vorwärts") dorthin gelangen.

Wenn Sie den HTML5-Modus annehmen, stellt sich heraus, dass dies einfach ist (obwohl ich sicher bin, dass einige kluge Leute da draußen herausfinden können, wie man dies eleganter macht!):

// Called when browser back/forward used
window.onpopstate = function() { 
    $timeout.cancel(doc_scrolling); 
};

// Called after ui-router changes state (but sadly before onpopstate)
$scope.$on('$stateChangeSuccess', function() {
    doc_scrolling = $timeout( scroll_top, 50 );

// Moves entire browser window to top
scroll_top = function() {
    document.body.scrollTop = document.documentElement.scrollTop = 0;
}

Die Funktionsweise besteht darin, dass der Router davon ausgeht, dass er nach oben scrollen wird, sich jedoch etwas verzögert, um dem Browser die Möglichkeit zu geben, den Vorgang abzuschließen. Wenn der Browser uns dann benachrichtigt, dass die Änderung auf eine Vorwärts- / Rückwärtsnavigation zurückzuführen ist, wird das Zeitlimit abgebrochen und der Bildlauf wird nie ausgeführt.

Ich habe Raw- documentBefehle zum Scrollen verwendet, weil ich zum gesamten oberen Rand des Fensters wechseln möchte. Wenn Sie nur ui-viewscrollen möchten , legen autoscroll="my_var"Sie my_varmithilfe der oben beschriebenen Techniken fest, wo Sie steuern . Aber ich denke, die meisten Leute werden die gesamte Seite scrollen wollen, wenn Sie als "neu" auf die Seite gehen.

Die oben genannten Verwendungen ui-Router, obwohl Sie könnte ng-Route verwenden , anstatt durch den Austausch $routeChangeSuccessfür $stateChangeSuccess.

Keine der Antworten löste mein Problem. Ich verwende eine Animation zwischen Ansichten und das Scrollen würde immer nach der Animation erfolgen. Die Lösung, die ich gefunden habe, damit das Scrollen nach oben vor der Animation erfolgt, ist die folgende Anweisung:

yourModule.directive('scrollToTopBeforeAnimation', ['$animate', function ($animate) {
    return {
        restrict: 'A',
        link: function ($scope, element) {
            $animate.on('enter', element, function (element, phase) {

                if (phase === 'start') {

                    window.scrollTo(0, 0);
                }

            })
        }
    };
}]);

Ich habe es in meiner Ansicht wie folgt eingefügt:

<div scroll-to-top-before-animation>
    <div ng-view class="view-animation"></div>
</div>

Einfache Lösung, fügen Sie scrollPositionRestorationim aktivierten Hauptroutenmodul hinzu.
So was:

const routes: Routes = [

 {
   path: 'registration',
   loadChildren: () => RegistrationModule
},
];

 @NgModule({
  imports: [
   RouterModule.forRoot(routes,{scrollPositionRestoration:'enabled'})
  ],
 exports: [
 RouterModule
 ]
 })
  export class AppRoutingModule { }

Versuchen Sie dies http://ionicframework.com/docs/api/service/ $ ionicScrollDelegate /

Es wird zum Anfang der Liste gescrollt. ScrollTop ()

Ich habe endlich bekommen, was ich brauchte.

Ich musste nach oben scrollen, wollte aber einige Übergänge nicht

Sie können dies auf Route-für-Route-Ebene steuern.
Ich kombiniere die obige Lösung von @wkonkel und füge eine einfache hinzunoScroll: true einigen Parameter . Dann fange ich das beim Übergang ein.

Alles in allem: Dies schwebt bei neuen Übergängen an den oberen Rand der Seite, bei Forward/ BackÜbergängen nicht an den oberen Rand und ermöglicht es Ihnen, dieses Verhalten bei Bedarf zu überschreiben.

Der Code: (vorherige Lösung plus eine zusätzliche noScroll-Option)

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

Legen Sie das in Ihren app.runBlock und spritzen Sie $state...myApp.run(function($state){...})

Wenn Sie dann nicht zum Anfang der Seite scrollen möchten, erstellen Sie eine Route wie folgt:

.state('someState', {
  parent: 'someParent',
  url: 'someUrl',
  noScroll : true // Notice this parameter here!
})

Dies funktionierte für mich einschließlich Autoscroll

<div class="ngView" autoscroll="true" >