用JS制作一个点击向下滚动，点击返回顶部（用Tween函数）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/tween.js" ></script>
<style>
*{
margin: 0;padding: 0;
}
.test{
border: 1px red solid;
height: 98px;
line-height: 100px;
}

#down{
    width: 100px;
    line-height: 100px;
    background: skyblue;
}
#top{
    width: 100px;
    line-height: 100px;
    text-align: center;
    background: skyblue;
    position: fixed;
    right: 10px;
    bottom: 10px;
}



</style>

</head>
<body>
<input type="button" id="down" value='点击向下滚动'/>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<input type="button" id="top" value="点击返回顶部" />

<script type="text/javascript">
        //获取当前TOP 还有down的ID
    var oDown = document.getElementById('down');
    var oTop = document.getElementById('top');
    
    //兼容性写法
    function setScrollerPos(aTop){
        document.body.scrollTop = aTop;
        document.documentElement.scrollTop = aTop;
    }
    function getScrollerPos(){
        return document.body.scrollTop||document.documentElement.scrollTop;
    }
    //给按钮绑定一个事件，运动tween函数
    oDown.onclick = function(){
        
        //起始值
        var start = 0;
        //结束值
        var end = 500;
        //过程
        var change = end - start;
        //步数
        var step = 0;
        //最大走的步数
        var stepMax = 30;
        //设置一个计时器
        var timer = setInterval(function(){
            //步数增加
            step++;
            if(step>=stepMax){
                //暂停计时器还有清空计时器
                clearInterval(timer);timer=null;
            }
            //tween函数曲线
            var t = Tween.Cubic.easeOut(step,start,change,stepMax);
            //在可滚动条调用t
            setScrollerPos(t);
        }, 30);
    }
    
    //同上
    oTop.onclick = function(){
        var start = getScrollerPos();
        //滚动条返回顶部就是滚动条位置等于0
        var end = 0;
        var change = end - start;
        var step = 0;
        var stepMax = 30;
        var timer = setInterval(function(){
            step++;
            if(step>=stepMax){
                clearInterval(timer);timer=null;
            }
            var t = Tween.Cubic.easeOut(step,start,change,stepMax);
            setScrollerPos(t);
        }, 30);
    }
</script>

</body>
</html>

用JS制作一个点击向下滚动，点击返回顶部（用Tween函数）

推荐阅读更多精彩内容