$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

$window
$location
$rootScope

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.

Links:

https://docs.angularjs.org/api/ng/service/$anchorScroll

doc_AngularJS

2016-03-29 16:10:01

Comments