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,

• Simple Example and Demo of Multistep form Using Angularjs
• Simple Example of Pagination Using jQuery and Bootstrap
• Simple Bootstrap Form Layout Examples
• Best Free Angularjs Grid & Table Plugin Examples

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) {
		$('.btn-scroll-up').addClass('display').fadeIn();
	} else {
		$('.btn-scroll-up').removeClass('display').fadeOut();
	}
});

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>