javascript - Angularjs $anchorScroll.yOffset 不适用于 ng-sticky header

Question

我的项目基于 Angular Material、Angular JS 构建，我使用 ngSticky 将标题粘贴在主标题(这是一个 md 工具栏)下方。

在第二个标题(粘性)中，有一堆按钮，它们应该作为滚动到同一页面中不同部分的链接。(单击按钮后，页面应该滚动到相应的部分)。

我使用了以下代码

Angular Controller

$anchorScroll.yOffset = 100;  
$location.hash(anchor);
$anchorScroll();

HTML

<div sticky offset="65" media-query="min-width: 1000px" style="background-color:white; border-bottom: 1px solid #CFCFCF;">
    <ng-include src="'XXX/XXX-buttons.html'"></ng-include>
    <div class="space-top-bottom"></div>
    <ng-include src="'XXX/XXX-links.html'"></ng-include>
</div>

请注意，链接位于 '<ng-include src="'XXX/XXX-links.html'"></ng-include>' 下

目前，页面滚动但未滚动到正确的位置，它忽略了粘性标题高度。

根据 Angular JS dos ，“为了使 yOffset 正常工作，滚动应该发生在文档的根元素上，而不是某个子元素上。”

预期行为:页面应滚动到确切的 div id。

问题:

Unable to add add offset to the scroll which compensate header(sticky) height.

感谢帮助。

Answer 1

我找到了以下解决方案，

$location.hash('current-div');
$anchorScroll();
$('#scrolling-div').animate({ scrollTop: $('#current-div').position().top - $('#sticky-div').height() }, "slow");

这个想法是在有 scoll 的 div 上设置动画，而不是在父 div 上设置动画。

希望这对某人有帮助。