$anchorScroll angular anchor service

angular anchor service $anchorScroll

 

In ordinary html pages, we will position the page display to an element by adding #elementId after the url, which is the so-called anchor point. 

However, on the page of the angular application, the page route is written as #route/route, and the anchor point will be parsed as a page route, which cannot achieve the purpose of positioning. Angular provides the function of $anchorScroll to provide anchors.

Usage: $anchorScroll([hash])

When called, the page will scroll to the specified hash associated with the element, or to the current $location.hsh().

<div 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 value of location.hash to 
      // the id of the element you want to scroll to 
      $location.hash('bottom' );

      // call $anchorScroll() 
      $anchorScroll();

    };
  }]);

Angular also provides a way to get the address behind the route #, usage:

$scope.$id;

 

jQuery also provides anchor services:

$('body,html').animate({ scrollTop: $('#bottom').offset().top }, 500);