service $anchorScroll

当调用时，根据HTML5规范中指定的规则，它会滚动到与指定的散列相关的元素(如果省略)到$location.hash()的当前值。

它还会观察 $location.hash() 和自动滚动，当它发生变化时，它会自动滚动。这可以通过调用$anchorScrollProvider.disableAutoScrolling()来禁用。

另外，您可以使用它的yOffset属性来指定垂直的滚动偏移量(固定的或动态的)。

依赖关系：

$window

$location

$rootScope

用法：

$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();
            }
        };
}]);

 

posted @ 2017-06-16 17:35  发福大叔  阅读(1136)  评论(0)  编辑  收藏  举报