Question

我想创建一个“平滑”的滚动动画，从一个元素向下滑动到另一个元素。我不想使用Jquery或任何库，只需javascript和HTML。我试过了：

element.scrollIntoView();

这会导致滚动，但不会导致平滑动画。我已经看过其他一些平滑滚动的技术，但是他们使用了Jquery。我还想补充一点，滚动应该是从页面上的ELEMENT到页面上的另一个ELEMENT。仅向下滚动。也只有javascript函数，如function scrollFromHere(from, to)。

Answer 1

我知道这是一个旧答案，但对于任何在“现代”寻找解决方案的人来说，scrollIntoView 支持 behavior 参数：

element.scrollIntoView({ 
  behavior: 'smooth' 
});

Answer 2

没关系，我想我找到了问题的答案。这需要大量的搜索，但现在是：

<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。

Answer 3

public void onClick(View view)

使用JS创建一个漂亮的滚动/滑动效果

3 个答案: