$anchorScroll

标签： Angular API 中文

---

• $anchorScrollProvider
• ng 模块中的服务

当被调用的时候，页面会滚动到与元素相关联的指定的 hash 处，或者滚动到当前 $location.hash() 处，是依照HTML5 spec 的规则制定的。

它当然也会监听 $location.hash() 并且无论锚点值何时变化，都会自动地滚动到相应的位置。当不需要它时，可以调用$anchorScrollProvider.disableAutoScrolling()让它失效。

另外我们可以使用它的 yOffset 属性来指定一个垂直滚动偏移量（既可以是定值也可以是动态值）。

---

依赖

$window $location $rootScope

---

用法

$anchorScroll([hash]);

参数

参数	形式	具体
hash (可选)	string	hash 将会指定元素滚动到的位置，如果省略参数，则将使用$location.hash() 作为默认值。

---

属性
yOffset

---	---
number function() jqLite	如果设置了这个值，将会指定一个垂直的滚动的偏移量。这种场景经常用于在页面顶部有固定定位的元素, 如导航条，头部等（让出头部空间）。 yOffset 可以用多种途径指定: - number : 一个固定的像素值可以使用（无单位）。 - function : 每次$anchorScroll()执行时这个函数都会被调用，它必须返回一个代表位移的数字（无单位像素值）。 jqLite : 一个jqLite/jQuery元素可以被指定为位移值。这个位移值会取页面的顶部到该元素底部的距离。 注意: 只有有元素的定位方式是固定定位时才会应该被纳入考虑之中。这个设置 在响应式的导航条/头部需要调整他们的高度亦或 根据视图来定位时很有用处。

为了使 yOffset 正确地工作，滚动必须是在文档的根节点，而不是子节点。

---

例子

html

  Go to bottom
   You're at the bottom!
  

javascript

angular.module('anchorScrollExample', [])

.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
  function ($scope, $location, $anchorScroll) {
    
    $scope.gotoBottom = function() {
      
      // 将location.hash的值设置为
      // 你想要滚动到的元素的id
      $location.hash('bottom');

      // 调用 $anchorScroll()
      $anchorScroll();
    
    };
  }]);

css

#scrollArea {

  height: 280px;
  overflow: auto;

}

#bottom {

  display: block;
  margin-top: 2000px;

}

---

下面的例子将说明如何使用一个垂直滚动偏移（指定了一个固定值）关于 $anchorScroll.yOffset 的详情请看上方介绍

html

  
  
    Go to anchor {{x}}
  
  



  Anchor {{x}} of 5

javascript

angular.module('anchorScrollOffsetExample', [])
.run(['$anchorScroll', function($anchorScroll) {

  $anchorScroll.yOffset = 50;   // 总是滚动额外的50像素

}])
.controller('headerCtrl', ['$anchorScroll', '$location', '$scope',
  function ($anchorScroll, $location, $scope) {
  
    $scope.gotoAnchor = function(x) {
    
      var newHash = 'anchor' + x;
      if ($location.hash() !== newHash) {
      
        // 将$location.hash设置为`newHash` and
        // $anchorScroll也将自动滚到该处
        
        $location.hash('anchor' + x);
        
      } else {
      
        // 显式地调用 $anchorScroll()方法 ,
        // 因为 $location.hash 并没有改变
        $anchorScroll();
      
      }
    };
  }
]);

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;

}

本文由作者原创，翻译内容仍有欠佳之处，请大家多多指正。via 村里有个村长 / @西瓜橘子葡萄冰