javascript - 动画滚动到带有 ID 的 div

标签 javascript html animation scroll

我知道以前可能有人问过这个问题,但我找不到正确的答案。

我正在尝试创建一个链接,当您单击它时,将页面滚动到具有 ID 的元素,仅使用 javascript,我可以控制速度。

我知道:

document.getElementById('youridhere').scrollIntoView();

但这没有用。它刚刚进入视野。我也试过 scrollBy 但那没有用,因为它是递增的。我可以写它来检查到元素的剩余距离,如果它小于增量,则只移动剩下的部分,但这看起来太笨重了。

我也尝试了 scrollTo,但也没什么用。

有没有更简洁的方法来做到这一点?

这只能是 javascript。这是一个 jquery 等价物:

var top = target.offset().top;

$('html,body').animate({scrollTop: top}, 1000);

最佳答案

没有内置的平滑滚动方式。我会在每次迭代时使用 setIntervalscrollBy 增量,然后在完成时使用 clearInterval

您还可以查看 jQuery 源代码以了解他们是如何做到的。

关于javascript - 动画滚动到带有 ID 的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5761085/

相关文章:

javascript - AngularJS 路由在 IE7 中不起作用

Javascript 平滑滑动?

html - 需要从 Angular 垫分页器中删除或自定义分页箭头

html - SVG 对象最初是垂直加载的,然后在浏览器中水平重新排列

javascript - 从过滤列表中删除时的 ng-repeat 动画

javascript - Raven Sentry 在最新的 Angular 4 中不起作用

javascript - 如何将当前日期时间与 javascript 中的另一个日期时间进行比较

html - 关于全覆盖搜索菜单的建议

ruby-on-rails - 找不到或无法读取要导入的文件 : compass/css3/animation

javascript - 如何让球左右移动?