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?
quelle
<div class="ng-view" autoscroll></div>
und er funktioniert genauso (es sei denn, Sie möchten das Scrollen an Bedingungen binden).$window.scrollTo(0,0)
in $ stateChangeSuccess Event ListenerSetzen Sie einfach diesen Code zum Ausführen
quelle
$window.scrollTop(0,0)
funktioniert bei mir besser als autoscroll. In meinem Fall habe ich Ansichten, die mit Übergängen ein- und ausgehen.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.
Hier ist die Aufrufreihenfolge des Angularjs-Moduls:
app.config()
app.run()
directive's compile functions (if they are found in the dom)
app.controller()
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
und Sie können jetzt sehen, dass der Bildlauf mit der neuen gerouteten Ansicht nach oben beginnt :)
quelle
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):
quelle
$locationProvider.html5Mode(true);
@wkronkel Gibt es eine Möglichkeit, dies zu erreichen, wenn Sie den HTML5-Modus nicht im Winkel verwenden? Weil das Neuladen der Seite 404 Fehler.run
an? der eckige deinapp
objekt?run
Funktion ist eine Methode, die für jedes Winkelmodulobjekt verfügbar ist.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).
PS Ich fand, dass das Autoscroll-Ding keine Auswirkung hatte, ob auf wahr oder falsch gesetzt.
quelle
Mit angularjs UI Router mache ich Folgendes:
Mit:
Es schlägt auf keiner Seite fehl und ist nicht global.
quelle
onEnter: scrollContent
// Your favorite scroll method here
?$('html, body').animate({ scrollTop: -10000 }, 100);
onEnter: scrollContent
auf jede Ansicht platziere, funktioniert sie nur für die erste Ansicht / Route, nicht für die zweite. Seltsam.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 sagenui-view
.Beispielsweise:
http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view
quelle
Sie können dieses Javascript verwenden
quelle
$location.hash('top')
bevor$anchorScroll()
der Standard vor / zurück Browser - Buttons funktionieren nicht mehr; Sie leiten Sie immer wieder zum Hash in der URL weiterWenn Sie einen UI-Router verwenden, können Sie diesen verwenden (on run)
quelle
Ich habe diese Lösung gefunden. Wenn Sie zu einer neuen Ansicht wechseln, wird die Funktion ausgeführt.
quelle
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:
Anmeldung:
quelle
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:
Meine initCtrl.js sieht aus wie:
Ich habe jede mögliche Option ausprobiert, diese Methode funktioniert am besten.
quelle
id="top-nav"
des richtigen Elements war wichtig.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!):
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-
document
Befehle zum Scrollen verwendet, weil ich zum gesamten oberen Rand des Fensters wechseln möchte. Wenn Sie nurui-view
scrollen möchten , legenautoscroll="my_var"
Siemy_var
mithilfe 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
$routeChangeSuccess
für$stateChangeSuccess
.quelle
var routerApp = angular.module('routerApp', ['ui.router']); routerApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) { $urlRouterProvider.otherwise('/home'); $locationProvider.html5Mode(false).hashPrefix(""); $stateProvider // HOME STATES AND NESTED VIEWS ======================================== .state('home', { url: '/home', templateUrl: 'partial-home.html' }) });
.state('web', { url: '/webdev', templateUrl: 'partial-web.html', controller: function($scope) { $scope.clients = ['client1', 'client2', 'client3']; // I put it here } })
Ich lerne gerade dieses Zeug, vielleicht fehlt mir etwas: DKeine 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:
Ich habe es in meiner Ansicht wie folgt eingefügt:
quelle
Einfache Lösung, fügen Sie
scrollPositionRestoration
im aktivierten Hauptroutenmodul hinzu.So was:
quelle
Versuchen Sie dies http://ionicframework.com/docs/api/service/ $ ionicScrollDelegate /
Es wird zum Anfang der Liste gescrollt. ScrollTop ()
quelle
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 hinzu
noScroll: 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)
Legen Sie das in Ihren
app.run
Block 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:
quelle
Dies funktionierte für mich einschließlich Autoscroll
<div class="ngView" autoscroll="true" >
quelle