根据我的理解,$ anchorScroll yOffset在子元素中是不可能的: “为了使yOffset正常工作,应该在文档的根目录上进行滚动,而不是某些子元素。” https://docs.angularjs.org/api/ng/service/ $ anchorScroll
示例(从AngularJS文档修改): 我想点击一个链接,并在滚动到的内容之上加上“之间”一词。
的index.html
<body ng-app="anchorScrollOffsetExample">
<div class="fixed-header" ng-controller="headerCtrl">
<a href="" ng-click="gotoAnchor(x)" ng-repeat="x in [1,2,3,4,5]">
Go to inner-anchor {{x}}
</a>
</div>
<div id="anchor" class="anchor">
<div ng-repeat="x in [1,2,3,4,5]">
between
<div id="innerAnchor{{x}}" class="anchor" >Inner-Anchor {{x}} of 5</div>
</div>
</div>
</body>
的style.css
.anchor {
border: 2px dashed DarkOrchid;
padding: 10px 10px 200px 10px;
max-height:500px;
overflow-y: auto;
}
的script.js
angular.module('anchorScrollOffsetExample', [])
.run(['$anchorScroll', function($anchorScroll) {
$anchorScroll.yOffset = 500;
}])
.controller('headerCtrl', ['$anchorScroll', '$location', '$scope',
function ($anchorScroll, $location, $scope) {
$scope.gotoAnchor = function(x) {
var newHash = 'anchor' + x;
if ($location.hash() !== newHash) {
$location.hash('innerAnchor' + x);
} else {
$anchorScroll();
}
};
}
]);
http://plnkr.co/edit/yFj9fL3sOhDqjhMawI72?p=preview
有没有一种很好的方法可以在AngularJS中执行此操作(最好不使用jQuery或其他库)而不将“介于”内部移动到我正在滚动到的DIV内部?
答案 0 :(得分:0)
为什么不使用锚标记?
<body ng-app="anchorScrollOffsetExample">
<div class="fixed-header" ng-controller="headerCtrl">
<a href="" ng-click="gotoAnchor(x)" ng-repeat="x in [1,2,3,4,5]">
Go to inner-anchor {{x}}
</a>
</div>
<div id="anchor" class="anchor">
<div ng-repeat="x in [1,2,3,4,5]">
<!-- Add an anchor above the text, and we scroll here instead of the div -->
<a name="innerAnchor{{x}}"></a>
between
<div class="anchor" >Inner-Anchor {{x}} of 5</div>
</div>
</div>
</body>