缓动模型（页面中一直处于底部的广告页）也可以自己修改到别的地方

本文链接：https://blog.youkuaiyun.com/weixin_42238089/article/details/89278754

注意：函数startMove（）的参数是运动终点位置
这个运动函数框架可以单独拿出来在任何地方使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;

        }
        body{
            height: 2000px;
        }
        #box{
            width: 100px;
            height: 200px;
            background-color: #1ba9ee;
            right: 0;
            position: absolute;
            bottom: 0;


        }
    </style>
</head>
<body>
<!--
    需求：需要使div一直处于页面底部
        静态时：高度 = 页面高度-div高度
        滚动时：高度 = 页面高度-div高度+滚动高度

        兼容性处理：var scrollHei = document.documentElement.scrollTop || document.body.scrollTop;
-->
<div id="box"></div>
<script type = "text/javascript">
    var box = document.getElementById('box');
    //var scrollHei = document.documentElement.scrollTop || document.body.scrollTop; //这样不行的原因是只要一动就值就是2000
    window.onscroll = function(){

        //box.style.top =document.documentElement.scrollTop + document.documentElement.clientHeight  - box.offsetHeight + 'px';
        startMove(document.documentElement.scrollTop + document.documentElement.clientHeight - box.offsetHeight);
    };
    var timer = null;
    function startMove(target){
        clearInterval(timer);
        timer = setInterval(function(){

            var speed = (target-box.offsetTop)/10;
            speed>0?speed = Math.ceil(speed):speed = Math.floor(speed);
            if(box.offsetTop==target){
                clearInterval(timer);
            }else {
                box.style.top = box.offsetTop + speed + 'px';
            }
        },30);
    }



</script>
</body>
</html>