service $anchorScroll
当调用时，根据HTML5规范中指定的规则，它会滚动到与指定的散列相关的元素(如果省略)到$location.hash()的当前值。
它还会观察 $location.hash() 和自动滚动，当它发生变化时，它会自动滚动。这可以通过调用$anchorScrollProvider.disableAutoScrolling()来禁用。
另外，您可以使用它的yOffset属性来指定垂直的滚动偏移量(固定的或动态的)。
依赖关系：
用法：
$anchorScroll([hash]);
参数： hash：string 指定要滚动到的元素的散列。如果省略了，将使用$location.hash()的值。
属性：yOffset
如果设置，指定一个垂直的滚动偏移。当页面顶部有固定的位置元素时，这通常很有用，例如导航栏、标题等。
可以用不同的方式指定yOffset:
number：被用作偏移量的固定数量的像素。
function:一个名为$anchorScroll() 的getter函数每次被执行时。必须返回一个表示偏移量的数字(以像素为单位)。
jqLite：用于指定偏移量的jqlite/jquery元素。从页面顶部到元素底部的距离将被用作偏移量。
例子：$location.hash()
index.html
<!DOCTYPE html> <html ng-app="indexApp"> <head lang="en"> <meta charset="UTF-8"> <title>BookStore</title> <style type="text/css"> #scrollArea { height: 280px; overflow: auto; } #bottom { display: block; margin-top: 2000px; } </style> </head> <body ng-controller="firCtrl"> <div> <div id="scrollArea"> <a ng-click="gotoBottom()">Go to bottom</a> <a id="bottom"></a> You're at the bottom! </div> </div> <script src="framework/angular.js"></script> <script src="myJs/index.js"></script> </body> </html>
script.js
angular.module('indexApp',[])
.controller('firCtrl',['$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();
};
}]);
下面的例子说明了scroll-offset (指定为固定值)的使用。更多细节请参照 $anchorScroll.yOffset
index.html
<!DOCTYPE html> <html ng-app="indexApp"> <head lang="en"> <meta charset="UTF-8"> <title>BookStore</title> <style type="text/css"> 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; } </style> </head> <body ng-controller="firCtrl"> <div class="fixed-header"> <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> <script src="framework/angular.js"></script> <script src="myJs/index.js"></script> </body> </html>
script.js
angular.module('indexApp',[])
.run(['$anchorScroll', function($anchorScroll) {
$anchorScroll.yOffset = 50; // always scroll by 50 extra pixels
}])
.controller('firCtrl',['$scope', '$location', '$anchorScroll',function($scope, $location, $anchorScroll){
$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();
}
};
}]);
