标签：rip r.js work 依赖关系 滚动 使用 add html5 isa
当调用时，根据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(); } }; }]);
标签：rip r.js work 依赖关系 滚动 使用 add html5 isa
原文地址：http://www.cnblogs.com/ms-grf/p/7028586.html
