AngularJS - $anchorScroll 平滑/持续时间 [英] AngularJS - $anchorScroll smooth/duration

问题描述

阅读 AngularJS 文档 我还没有弄清楚 $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

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