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

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


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.


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


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);

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.