ScrollTo function in AngularJS

Here is a simple directive that will scroll to an element on click:

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

Demo: http://plnkr.co/edit/yz1EHB8ad3C59N6PzdCD?p=preview

For help creating directives, check out the videos at http://egghead.io, starting at #10 "first directive".

edit: To make it scroll to a specific element specified by a href, just check attrs.href.

myApp.directive('scrollOnClick', function() {  return {    restrict: 'A',    link: function(scope, $elm, attrs) {      var idToScroll = attrs.href;      $elm.on('click', function() {        var $target;        if (idToScroll) {          $target = $(idToScroll);        } else {          $target = $elm;        }        $("body").animate({scrollTop: $target.offset().top}, "slow");      });    }  }});

Then you could use it like this: <div scroll-on-click></div> to scroll to the element clicked. Or <a scroll-on-click href="#element-id"></div> to scroll to element with the id.

This is a better directive in case you would like to use it:

you can scroll to any element in the page:

.directive('scrollToItem', function() {                                                          return {                                                                                         restrict: 'A',                                                                               scope: {                                                                                         scrollTo: "@"                                                                            },                                                                                           link: function(scope, $elm,attr) {                                                               $elm.on('click', function() {                                                                    $('html,body').animate({scrollTop: $(scope.scrollTo).offset().top }, "slow");            });                                                                                      }                                                                                        }})     

Usage (for example click on div 'back-to-top' will scroll to id scroll-top):

<a id="top-scroll" name="top"></a><div class="back-to-top" scroll-to-item scroll-to="#top-scroll"> 

It's also supported by chrome,firefox,safari and IE cause of the html,body element .

In order to animate to a specific element inside a scroll container (fixed DIV)

/*    @param Container(DIV) that needs to be scrolled, ID or Div of the anchor element that should be scrolled to    Scrolls to a specific element in the div container*/this.scrollTo = function(container, anchor) {    var element = angular.element(anchor);    angular.element(container).animate({scrollTop: element.offset().top}, "slow");}