原生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>