Improve this Doc View Source

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`

  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

Edit in Plunker

    <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;
    }

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

Edit in Plunker

    <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;
    }