AngularJS - $ anchorScroll smooth / duration [英] AngularJS - $anchorScroll smooth/duration

问题描述

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

Reading the AngularJS docs I haven't figured out if $anchorScroll can have a duration/easing option to smooth scroll to elements.

它只说：

$location.hash('bottom');

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

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

I do not use jquery and don't want to; is there still a clever yet simple way to make or extend $anchorScroll in order to make scrolling more smooth?

推荐答案

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

Unfortunately this is not possible using $anchorScroll. As you discovered $anchorScroll doesn't have any options and doesn't work with $ngAnimate. In order to animate the scroll you would need to use your own service/factory or just straight javascript.

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

For the sake of self-learning I put together an example with a smooth scrolling service. There are probably better ways to do this so any feedback is encouraged.

要滚动到元素，请将 ng-click =gotoElement（ID）附加到任何元素。我认为更好的方法是将其作为指令。

To scroll to an element you attach a ng-click="gotoElement(ID)" to any element. I think an even better route would be to make this a directive.

这是 jsFiddle上的工作示例。

更新

现在有许多第三方指令可用于实现此目的。

There are now a number of third-party directives for accomplishing this.

• https：/ /github.com/oblador/angular-scroll 。


• https://github.com/d-oliveros/ngSmoothScroll


• https://github.com/arnaudbreton/angular-smoothscroll


• https://gist.github.com/justinmc/d72f38339e0c654437a2

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

这篇关于AngularJS - $ anchorScroll smooth / duration的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！