我想创建一个从一个元素滑到下一个元素的“平滑”滚动动画。我不想使用 Jquery 或任何库，只是 javascript 和 HTML。我试过了：
element.scrollIntoView();
这会导致滚动，但不是流畅的动画。我已经看过其他一些平滑滚动技术，但它们使用的是 Jquery。我还想补充一点，滚动应该是从页面上的 ELEMENT 到页面上的另一个 ELEMENT。仅向下滚动。也只有像function scrollFromHere(from, to)这样的javascript函数。
【问题讨论】：
标签： javascript dom
没关系，我想我找到了问题的答案。花了很多时间搜索，但这里是：
<div id="elem1"><button onclick="scrollToward('elem2', 'elem1');">Scroll Down</button></div>
<div id="elem2"></div>
<script>
//Here is my script:
function animate(elem,style,unit,from,to,time,prop) {
if( !elem) return;
var start = new Date().getTime(),
timer = setInterval(function() {
var step = Math.min(1,(new Date().getTime()-start)/time);
if (prop) {
elem[style] = (from+step*(to-from))+unit;
} else {
elem.style[style] = (from+step*(to-from))+unit;
}
if( step == 1) clearInterval(timer);
},25);
elem.style[style] = from+unit;
}
function scrollToward(ele, from) {
var target = document.getElementById(ele);
from = document.getElementById(from).offsetTop;
animate(document.body, "scrollTop", "", from, target.offsetTop, 1500, true);
}
</script>
在您以创建滚动条的方式设置 div 样式时经过测试并且可以正常工作。找到答案here。
【讨论】：
我知道这是一个旧答案，但对于在“现代”寻找解决方案的任何人，scrollIntoView 支持 behavior 参数：
element.scrollIntoView({
behavior: 'smooth'
});
【讨论】：
!doctype html>
<head>
<style>
/* Prevents slides from flashing */
#slides {
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<script>
$(function(){
$("#slides").slidesjs({
width: 940,
height: 528
});
});
</script>
</head>
<body>
<div id="slides">
<img src="">
</div>
</body>
【讨论】：