AngularJS - $ anchorScroll smooth/duration

Question

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

它只说:

$location.hash('bottom');

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

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

Answer 1

不幸的是,这是不可能的$anchorScroll.正如您所发现的$anchorScroll那样,没有任何选项,也无法使用$ngAnimate.要为滚动设置动画,您需要使用自己的服务/工厂或直接使用javascript.

为了自学,我用一个平滑的滚动服务组合了一个例子.可能有更好的方法来做到这一点,所以鼓励任何反馈.

要滚动到元素,请将a附加ng-click="gotoElement(ID)"到任何元素.我认为更好的方法是将其作为指令.

这是关于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

Answer 2

您也可以使用angular-scroll,链接" https://github.com/durated/angular-scroll/ ".它平滑滚动也很少的缓和功能,以获得专业的外观.

Answer 3

布雷特的答案对我很有帮助.我在模块化和可测试性方面对他的解决方案做了一些小改动.

这是JsFiddle的另一个工作示例,其中包括包含测试的其他版本.

为了测试,我使用的是Karma和Jasmine.签名略有修改如下:

 anchorSmoothScroll.scrollTo(elementId, speed);

其中element是要滚动到的必需属性,而speed是可选的,默认值为20(之前为).