Skip to content

I've used angular-scroll to good effect before. It's lightweight (8.5kB), easy to use, and even takes care of scrolling animations for you. It also meets accessibility standards, as the Tab key can be used to navigate just like a normal anchor tag.

Implement like this:

JS

angular.module('app', ['duScroll']).controller('MainCtrl', function ($scope, $document) {  //Controller logic here}

HTML

<a href="#nav-one" du-smooth-scroll duration="1500">Navigation Link</a><!-- further down the page --><div id="nav-one">  Content goes here.</div>

Working CodePen for reference: http://codepen.io/Pangolin-/pen/dPQRZa

Happy hunting!

I recently worked with $angularScroll and have some tips for you.

In your template:

<a href="javascript:void(0)" ng-click="scrollTo('hello-scroll')">Go</a>...<div id="hello-scroll">Hello Scroll!</div>

In your controller:

angular   .module('someModule', [])   .controller('scrollCtrl', function($scope, $timeout, $timeout, $anchorScroll) {        /**         * @name    scrollTo         * @desc    Anchor scrolling within page using $anchorScroll         * @param   {String}   hash - Element ID.         * @return  void         */        $scope.scrollTo = function(hash) {           $location.hash(hash);           $timeout(function() {              $anchorScroll();            }, 100);        }    });

The reason I added the $timeout call is because when I tested it without it, the $scrollTo didn't seem to work. It seems that the call to $location.hash(hash) takes some small time to process, hence the 100 ms wait.

Hope it works.