Skip to main content
angular js tutorials

How to Add “Go to Top” OR ” Back to Top” Using angularjs

In the angularjs application, this tutorial helps you add “top to top”. In every angularjs web app this is a pretty common feature. We must detect conditions if the top button is displayed, and then provide features to scroll across the page.

We usually use '#' to scroll up the page, however it doesn’t work in the application angularjs.

Also Checkout other tutorials of angular grid,

Display “Back to Top” button in application

When the User scrolls down 100px the BackToTop button will show, We will create back to top button and added into theme.We will add hide class to hide the BackToTop button when page will load.

Calculate the amount of user scrolled and calculated dependent upon the button BackToTop show/hide.

Hide and Show BackToTop button

$(window).scroll(function () {
	if ($(this).scrollTop() > 100) {
	} else {

Let’s create a backToTop() function into the controller scope.This function will use to scroll up the page.

$scope.backToTop = function() {
          $("html, body").animate({ scrollTop: 0 }, 1000);

How to use BackToTop in angularjs

We will call the function backToTop() on click of button. We will call function on click of “Back to top” button as like below,

<button type="button" scrollable ng-click="backToTop()">Back to Top</button>

Leave a Reply

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