javascript - AngularJS - $anchorScroll 平滑/持续时间

Question

阅读AngularJS docs我还没有弄清楚 $anchorScroll 是否可以有持续时间/缓动选项来平滑滚动到元素。

它只是说:

$location.hash('bottom');

// call $anchorScroll()
$anchorScroll();

我不使用 jquery，也不想；是否仍然有一种聪明而简单的方法来制作或扩展 $anchorScroll 以使滚动更流畅？

Answer 1

不幸的是，使用 $anchorScroll 是不可能的。正如您所发现的那样，$anchorScroll 没有任何选项并且不能与 $ngAnimate 一起使用。为了使滚动动画，您需要使用自己的服务/工厂或直接使用 javascript。

为了自学，我整理了一个带有平滑滚动服务的示例。可能有更好的方法来做到这一点，因此鼓励任何反馈。

要滚动到一个元素，您可以将 ng-click="gotoElement(ID)" 附加到任何元素。我认为更好的方法是将其设为指令。

这是 working example on jsFiddle .

更新

现在有许多第三方指令可以实现这一点。

• https://github.com/oblador/angular-scroll .
• https://github.com/d-oliveros/ngSmoothScroll
• https://github.com/arnaudbreton/angular-smoothscroll
• https://gist.github.com/justinmc/d72f38339e0c654437a2