ng scroll to

by Osama Qassar

HTML

<script src="https://code.jquery.com/jquery-1.6.1.min.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl">
    <ul>
      <li ng-repeat="i in items" style="width: 100%; line-height: 30px;">
        {{i}} click me to scroll to me!
      </li>
    </ul>
    <button>
      scroll to
    </button>
    <scroll-on-click></scroll-on-click>
  </body>

JavaScript

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

app.controller('MainCtrl', function($scope) {
  $scope.items = [];
  for (var i=0; i<100; i++) { $scope.items.push(i); }
  
  $scope.scrollTo=function(frm, to){
      $("html,body").animate({scrollTop: '0px'}, "slow");
  }
});

app.directive('scrollOnClick', function() {
  return {
    restrict: 'EA',
    template:'<a title="Click here to go top" class="scrollup">Scroll</a>',
    link: function(scope, $elm) {
		$(window).scroll(function () {
            if ($(this).scrollTop() > 300) {
                $('.scrollup').fadeIn();
            } else {
                $('.scrollup').fadeOut();
            }
    });   
      $elm.on('click', function() {
        //alert('hello');
        $("html,body").animate({scrollTop: '0px'}, "slow");
      });
    }
  }
});