Anchoring using AngularJS – $anchorScroll and yOffset

When you want to scroll to some position in Single page, You can use angularJS solution known as anchoring.using $anchorScroll service or you can use traditional scrolling using window.scrollTo method.

When you use $anchorScroll, it scrolls to the element related to the specified hash or HTML element ID or current value of the $location.hash().

This also watches the $location.hash() and automatically scrolls to match any anchor whenever it changes.

$anchorScroll([hash]);

Here, hash specifies to the HTML element id to scroll to.

It is having one attribute yOffset, it specifies a vertical scroll-offset. This is often useful when there are fixed positioned elements at the top of the page, such as navigation menus, headers etc.

Example of Normal anchoring:

Index.html

<div id="scrollTutorial" style="height: 500px; overflow: auto;"  ng-controller="ScrollTutorialController">

<a ng-click="gotoFooterOfThePage()">This is Top element, Go to Footer! </a>
<div id="footer" style="display: block; margin-top: 2000px;">
Welcome to bottom of the page!</div>

ScrollTutorialController.js

angular.module('anchorScrollTutorialApp', [])
.controller('ScrollTutorialController', ['$scope', '$location', '$anchorScroll', function($scope, $location, $anchorScroll)
{
	$scope.gotoFooterOfThePage = function() {
	// set the location.hash to the id of the element you wish to scroll to.
	$location.hash('footer');
	// call $anchorScroll()
	$anchorScroll();     };
}]);

Example of scroll using yOffset :

Home.html

<div id="app-menu" ng-controller="myAppCtrl" style="background-color: grey; height: 25px; position: fixed; top: 0; left: 0; right: 0;">

<a href="" ng-click="gotoSection(x)" ng-repeat="x in [1,2,3]">
Go to Section {{x}} </a>
<div id="section{{x}}" ng-repeat="x in [1,2,3]" style="border: 5px dashed blue; padding: 10px 10px 500px 10px;" > Section {{x}} of 5</div>
</div>

AppCtrl.js

angular.module('myAnchorScrollOffsetTutorial', [])
       .run(['$anchorScroll', function($anchorScroll) {
             $anchorScroll.yOffset = 25;
             // always scroll by 25 extra pixels
       }])
       .controller('myAppCtrl',
['$anchorScroll', '$location', '$scope',
function($anchorScroll, $location, $scope) {

             $scope.gotoSection = function(x) {
                    var newHash = 'anchor' + x;
                    // set the $location.hash to `newHash` and $anchorScroll will scroll to it
                    $location.hash(newHash);
                    // call $anchorScroll() to go to the new HTML element selected
                    $anchorScroll();
};
       }]);

 

If you don’t want to modify yOffset attribute across the application you can use alternative i.e. using $window just after $anchorScroll.

$window.scroll($window.scrollX, $window.scrollY - offset);

$anchorScroll also watches the $location.hash() and automatically scrolls to match any anchor whenever it changes.

This can be disabled by calling $anchorScrollProvider.disableAutoScrolling().