Improve this Doc  View Source


  1. - $anchorScrollProvider
  2. - 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).





Param Type Details

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


  • yOffset


    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.


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

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}}
<div id="anchor{{x}}" class="anchor" ng-repeat="x in [1,2,3,4,5]">
  Anchor {{x}} of 5