$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);