Question

我正在尝试为溢出设置为auto的div设置“滚动到顶部”按钮的动画（滚动条显示为溢出超过div限制，因此这不是问题）。在单击按钮时，我在javascript（而不是jquery）函数中调用for循环。 for循环的每个递减增量（从当前element.scrollTop位置开始）是逐渐向后滚动，直到element.scrollTop为0.理论上非常简单和直接。在IE浏览器中工作就像一个梦想（非常不典型！）但在Firefox或Chrome中无效！所有这一切都是JUMPS到顶部...没有平滑的逐渐向上滚动这是我想要的！请帮忙！

的javascript：

function scrollUp(d){
var s=document.getElementById(d).scrollTop;
for (x=s; x>0; x=x-1){document.getElementById(d).scrollTop=x;}
}

HTML：

<div id="this_div" class="container">
<div id="top" class="topbutton" onClick="scrollUp('this_div');">Top</div>
</div>

Answer 1

您可以使用计时器为其设置动画

window.onload = function() {
    document.getElementById('top').onclick = function() {
       scrollUp('this_div');  
    };
};

function scrollUp(d){
    var s = document.getElementById(d).scrollTop;
    var scrollDistance = 10;
    var scrollSpeed = 200; // 1000 = 1 seconds

    var scrollAnimate = setInterval(function() {
       if (s > 0) {
            s -= scrollDistance;
            document.getElementById(d).scrollTop = s;
       } else {
          clearInterval(scrollAnimate);
       } 
    },scrollSpeed);
}

您现在可以通过更改scrollDistance和scrollSpeed的值来操纵滚动的速度和距离。

JAVASCRIPT ONLY（没有jquery）div中的动画scrollTop

1 个答案: