javascript – How to scroll to top of the page in AngularJS?-ThrowExceptions

Exception or error:

I want to scroll to the top of the page after getting an ajax call response using angularjs. Basically, I am displaying alert messages on top of the page and I want to focus the alert message as the ajax response received.

Thanks

How to solve:

You can use

$window.scrollTo(x, y);

where x is the pixel along the horizontal axis and y is the pixel along the vertical axis.

  1. Scroll to top

    $window.scrollTo(0, 0);
    
  2. Focus on element

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

Example

Update:

Also you can use $anchorScroll

Example

###

You can use $anchorScroll.

Just inject $anchorScroll as a dependency, and call $anchorScroll() whenever you want to scroll to top.

###

Ideally we should do it from either controller or directive as per applicable.
Use $anchorScroll, $location as dependency injection.

Then call this two method as

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

Here scrollToDivID is the id where you want to scroll.

Assumed you want to navigate to a error message div as

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

For more information please see this documentation

###

Don’t forget you can also use pure JavaScript to deal with this situation, using:

window.scrollTo(x-coord, y-coord);

###

use: $anchorScroll();

with $anchorScroll property

Leave a Reply

Your email address will not be published. Required fields are marked *