Wie scrolle ich in AngularJS zum Anfang der Seite?

73

Ich möchte zum oberen Rand der Seite scrollen, nachdem ich eine Ajax-Anrufantwort mit anglejs erhalten habe. Grundsätzlich werden oben auf der Seite Warnmeldungen angezeigt, und ich möchte die Warnmeldung als empfangene Ajax-Antwort fokussieren.

Vielen Dank

javascript jquery angularjs Farjad Hasan
quelle

Antworten:

155

Sie können verwenden 

$window.scrollTo(x, y);

Dabei xist das Pixel entlang der horizontalen Achse und ydas Pixel entlang der vertikalen Achse.

  1. Scrolle nach oben

    $window.scrollTo(0, 0);

  2. Konzentrieren Sie sich auf das Element

    $window.scrollTo(0, angular.element('put here your element').offsetTop);

Example

Update :

Auch können Sie verwenden $anchorScroll

Example

Oleksandr T.
quelle
6
Für die Konzentration auf Element,$window.scrollTo(0, angular.element('put here your element').offset().top);
Muhammad Reda
1
Vergessen Sie nicht, $ window in die Definition der Controller-Funktion einzufügen. Zum Beispiel: Funktion ($ scope, $ rootScope, $ location, base_factory, $ window)
Deepak
@ MuhammadReda, wenn Sie sagen, setzen Sie hier Ihr Element 'ist das die ID des Elements? Zum Beispiel möchte ich zum Anfang eines Elements mit der ID "direction_panel" scrollen, also habe ich das eingegeben, wo Sie "hier Ihr Element einfügen" sagen, aber ich erhalte eine Fehlermeldung. Vielen Dank für jede Hilfe
Sarah
@ MuhammadReda Ich habe es jetzt funktioniert danke. Anstelle von angle.element ('platziere dein Element hier'). OffsetTop Ich habe document.getElementById ('my_element'). OffsetTop gemacht. Danke für die Hilfe :)
Sarah
Ich weiß nicht warum, aber diese beiden Codes funktionieren nicht. Ich benutze es mit der ng-Kalender-Direktive. :(
rahim.nagori
31

Sie können verwenden $anchorScroll.

Nur inject $anchorScrollals Abhängigkeit und Anruf , $anchorScroll()wann immer Sie wollen nach oben blättern.

Muhammad Reda
quelle
2
Beachten Sie, dass für keine Animation (glattes Scrollen) verfügbar ist $anchorScroll.
Isherwood
12

Idealerweise sollten wir dies entweder vom Controller oder von der Direktive aus tun. Verwendung $anchorScroll, $locationwie Dependency Injection.

Rufen Sie dann diese beiden Methoden als auf

$location.hash('scrollToDivID');
$anchorScroll();

Hier scrollToDivIDist die ID, in die Sie scrollen möchten.

Angenommen, Sie möchten zu einer Fehlermeldung div as navigieren

<div id='scrollToDivID'>Your Error Message</div>

Weitere Informationen finden Sie in dieser Dokumentation

Partha Sarathi Ghosh
quelle
Die obige Antwort ist für Angularjs 1
Partha Sarathi Ghosh
3

Vergessen Sie nicht, dass Sie auch reines JavaScript verwenden können, um mit dieser Situation umzugehen:

window.scrollTo(x-coord, y-coord);
Ignacio Ara
quelle
-5

verwenden: $anchorScroll();

mit $anchorScrollEigentum

Ather Parvez
quelle
Die Antwort sollte beschreibend sein.
Farjad Hasan