Improve this Doc  View Source

$anchorScroll

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

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

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


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>