Angular directive for scroll top.

If user is at the bottom of the page give an option to navigate to top of the page by clicking an arrow or button. We can create a simple directive to achieve this. I have written same using Angular 2 concept as well, click here to know more.

Add below directive at footer or where you want to display the arrow.

 <scroll-up></scroll-up>

Directive

angular.module("your-module-name").directive("scrollUp",
function(){
return{
 restrict: 'E',
 transclude: true,
 replace: true,
 template: '<a class="scrollTopBtn" ng-click="scrollToTop()">
             <img src ='image/arrow' alt="image" ></i>
           </a>',
 controller : function($scope){
  $scope.scrollToTop = function(){
    $('html, body').animate({scrollTop : 0},900);
  }
 },
 link : function( scope, element, attrs ){
  $(window).scroll(function(){
    if ($(this).scrollTop() > 200){
     $(".scrollTopBtn").css('display':'block');
    }else{
     $('.scrollTopBtn').css('display':'none');
    }
  });
  }
  }
 }
);

Related Posts

1. Angular js client side pagination like google.

2. Angular Loader using font awesome icons

3. Angular js add class to active element