原生js如何实现jQuery.animate中的scrollTop方法

发布于
2016-12-02

网上找不到一个好的介绍来实现，

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

怎么控制这个scrollTop的时间呢？

javascript jquery

阅读 7.2k

3 个回答

得票最新

Nine

1.1k615

发布于
2016-12-02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    html{
        height : 200%;
    }
    #position{
        width : 100px;
        height : 100px;
        position: absolute;
        top : 100%;
        left: 80%;
        background: red;
    }
</style>
<body >
    <div id="position"></div>
</body>
<script>
    (()=>{

        let pos = document.getElementById('position');
        pos.onclick = ()=>{
            let curr_top = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
            let time_id = setInterval(()=>{
                curr_top -= 10;
                document.body.scollTop = curr_top;
                document.documentElement.scrollTop = curr_top;
                if(curr_top <= 0){
                    clearInterval(time_id);
                }
            } , 100);

        }
    })()
    
</script>
</html>

William

1284

发布于
2016-12-02

你要做的不是控制时间，而是控制步长，比如800px，800ms，就是800ms内移动800px，如果是1600px，那就800ms内移动1600px

查看全部 3 个回答

推荐问题

原生js如何实现jQuery.animate中的scrollTop方法

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

如何在浏览器开发者工具中导入本地JS文件并直接运行？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？

前端有没有办法实现页面截图？