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

id="scrollTutorial" style="height: 500px; overflow: auto;" ng-controller="ScrollTutorialController">
ng-click="gotoFooterOfThePage()">This is Top element, Go to Footer!
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

id="app-menu" ng-controller="myAppCtrl" style="background-color: grey; height: 25px; position: fixed; top: 0; left: 0; right: 0;"> href="" ng-click="gotoSection(x)" ng-repeat="x in [1,2,3]"> Go to Section {{x}}
id="section{{x}}" ng-repeat="x in [1,2,3]" style="border: 5px dashed blue; padding: 10px 10px 500px 10px;" > Section {{x}} of 5

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().

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s