$anchorScroll

- $anchorScrollProvider
- service in module ng

When called, it scrolls to the element related to the specified hash or (if omitted) to the current value of $location.hash(), according to the rules specified in the HTML5 spec.

It also watches the $location.hash() and automatically scrolls to match any anchor whenever it changes. This can be disabled by calling $anchorScrollProvider.disableAutoScrolling().

Additionally, you can use its yOffset property to specify a vertical scroll-offset (either fixed or dynamic).

Dependencies

Usage

$anchorScroll([hash]);

Arguments

Param	Type	Details
hash (optional)	string	The hash specifying the element to scroll to. If omitted, the value of $location.hash() will be used.

Properties

`yOffset`

number function()jqLite

If set, specifies a vertical scroll-offset. This is often useful when there are fixed positioned elements at the top of the page, such as navbars, headers etc.

yOffset can be specified in various ways:

number: A fixed number of pixels to be used as offset.
function: A getter function called everytime $anchorScroll() is executed. Must return a number representing the offset (in pixels).
jqLite: A jqLite/jQuery element to be used for specifying the offset. The distance from the top of the page to the element's bottom will be used as offset.
Note: The element will be taken into account only as long as its position is set to fixed. This option is useful, when dealing with responsive navbars/headers that adjust their height and/or positioning according to the viewport's size.

In order for yOffset to work properly, scrolling should take place on the document's root and not some child element.

Example

<div id="scrollArea" ng-controller="ScrollController">
  <a ng-click="gotoBottom()">Go to bottom</a>
  <a id="bottom"></a> You're at the bottom!
</div>

angular.module('anchorScrollExample', [])
.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
  function ($scope, $location, $anchorScroll) {
    $scope.gotoBottom = function() {
      // set the location.hash to the id of
      // the element you wish to scroll to.
      $location.hash('bottom');

      // call $anchorScroll()
      $anchorScroll();
    };
  }]);

#scrollArea {
  height: 280px;
  overflow: auto;
}

#bottom {
  display: block;
  margin-top: 2000px;
}

Load online demo

The example below illustrates the use of a vertical scroll-offset (specified as a fixed value). See $anchorScroll.yOffset for more details.

<div class="fixed-header" ng-controller="headerCtrl">
  <a href="" ng-click="gotoAnchor(x)" ng-repeat="x in [1,2,3,4,5]">
    Go to anchor {{x}}
  </a>
</div>
<div id="anchor{{x}}" class="anchor" ng-repeat="x in [1,2,3,4,5]">
  Anchor {{x}} of 5
</div>

angular.module('anchorScrollOffsetExample', [])
.run(['$anchorScroll', function($anchorScroll) {
  $anchorScroll.yOffset = 50;   // always scroll by 50 extra pixels
}])
.controller('headerCtrl', ['$anchorScroll', '$location', '$scope',
  function ($anchorScroll, $location, $scope) {
    $scope.gotoAnchor = function(x) {
      var newHash = 'anchor' + x;
      if ($location.hash() !== newHash) {
        // set the $location.hash to `newHash` and
        // $anchorScroll will automatically scroll to it
        $location.hash('anchor' + x);
      } else {
        // call $anchorScroll() explicitly,
        // since $location.hash hasn't changed
        $anchorScroll();
      }
    };
  }
]);

body {
  padding-top: 50px;
}

.anchor {
  border: 2px dashed DarkOrchid;
  padding: 10px 10px 200px 10px;
}

.fixed-header {
  background-color: rgba(0, 0, 0, 0.2);
  height: 50px;
  position: fixed;
  top: 0; left: 0; right: 0;
}

.fixed-header > a {
  display: inline-block;
  margin: 5px 15px;
}

Load online demo