<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div data-ng-app="myApp">
      <div id="mainDiv" class="main" data-ng-controller="MainPageCtrl">
        <div id="top"></div>
        <h1>AngularJs scroll top on click with animate</h1>

                        <div class="header">
        header
        </div>
        <div class="content">
                  <br />
          <br />
          <br />
          <br />
          <br />
        content                    <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
        </div>
        <div class="footer">
        footer
          <div class="ScrollTopBtn animate-show" ng-show="isShowScrollTopBtn" style="position: fixed; bottom: 60px; right: 0;" scroll-on-click="top"></div>
        </div>
      </div>
    </div>
  </body>

</html>

var myApp = angular.module('myApp', []); 

myApp.directive('scrollOnClick', function () {
        return {
            restrict: 'A',
            link: function (scope, $elm, attr) {
                $elm.on('click', function () {
                    var ele = $("#" + attr.scrollOnClick);
                    $("body").animate({ scrollTop: ele.offset().top }, "slow");
                });
            }
        }
    });

myApp.controller('MainPageCtrl', ["$scope", "$window", function($scope, $window) {
function setShowScrollTopBtn() {
		        $scope.isShowScrollTopBtn = false;
		        $window = angular.element($window);
		        
		        $window.on('scroll', function () {
		            //alert(2); 
		            if ($window[0].scrollY > 200) {
		                $scope.isShowScrollTopBtn = true;
		                //alert($scope.isShowScrollTopBtn);
		            }
		            else {
		                $scope.isShowScrollTopBtn = false;
		            }

		            $scope.$apply();
		        });
		    }
		    setShowScrollTopBtn();
}]);
.ScrollTopBtn {
    background-image: url("https://cdn1.iconfinder.com/data/icons/musthave/32/Stock%20Index%20Up.png");
    height: 32px;
    width: 32px;
    background-position: 0px 0px;
    cursor: pointer;
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    -o-transition: 0.25s;
    transition: 0.25s;
}

    .ScrollTopBtn:hover {
        background-image: url("https://cdn1.iconfinder.com/data/icons/Hand_Drawn_Web_Icon_Set/32/arrow_up.png");
        height: 32px;
        width: 32px;
        background-position: 0px 32px;
    }
    
    /*animate-show start*/
.animate-show {
    -webkit-transition: all linear 0.5s;
    -moz-transition: all linear 0.5s;
    -o-transition: all linear 0.5s;
    transition: all linear 0.5s;
    opacity: 1;
    line-height: 20px;
}

    .animate-show.ng-hide-add,
    .animate-show.ng-hide-remove {
        display: block!important;
    }

    .animate-show.ng-hide {
        line-height: 0;
        opacity: 0;
    }
/*animate-show end*/