$anchorScroll angular錨點服務

angular錨點服務 $anchorScroll

 

普通的html頁面中，咱們會經過在url後面添加#elementId的方式，將頁面顯示定位到某個元素上，也就是所謂的錨點。 

可是在angular應用的頁面上，頁面路由的寫法是#route/route，錨點會被當作一個頁面路由解析過去，達不到定位的目的。angular提供了$anchorScroll用來提供錨點的功能。

用法：  $anchorScroll([hash])

當被調用的時候，頁面會滾動到與元素相關聯的指定的hash處，或者滾動到當前$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() {

      // 將location.hash的值設置爲
      // 你想要滾動到的元素的id
      $location.hash('bottom');

      // 調用 $anchorScroll()
      $anchorScroll();

    };
  }]);

angular還提供了一種方式，用來獲取路由 #後面的地址，用法：

$scope.$id;

 

jQuery也提供了錨點服務：

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