当调用时，根据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();
}
};
}]);
时间： 2024-10-08 20:04:37