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.
The example below illustrates the use of a vertical scroll-offset (specified as a fixed value). See $anchorScroll.yOffset for more details.

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.5.11/docs/api/ng/service/$anchorScroll