div中仅包含JAVASCRIPT (不包含jquery)的scrollTop动画
div中仅包含JAVASCRIPT (不包含jquery)的scrollTop动画
提问于 2015-01-31 13:56:40
我正在尝试为溢出设置为自动的div设置一个“滚动到顶部”按钮(当溢出超过div限制时会显示滚动条，所以这不是问题)。单击按钮时，我在javascript (而不是jquery)函数中调用for循环。for循环的每个递减增量(从当前element.scrollTop位置开始)都会逐渐向下滚动，直到element.scrollTop为0。理论上非常简单明了。在IE中像做梦一样工作(非常不典型！)但在Firefox或Chrome中不起作用！它所做的就是跳转到top...no平滑的渐进式向上滚动，这就是我想要的！请帮帮我！
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>回答 1
Stack Overflow用户
发布于 2015-01-31 14:04:33
你可以使用定时器来设置动画
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的值，就可以控制滚动的速度和距离。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28248686
复制相关文章
相似问题
腾讯云开发者
