缓冲菜单（滑块根据滚轮滑动一直滑动到页面右边的中间）

本文链接：https://blog.youkuaiyun.com/OrdnAry/article/details/108294553

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #menu{width: 100px; height: 100px; background-color: red; position: absolute; right: 0px}
        *{margin: 0px; padding: 0px}
    </style>
    <script>
        window.onload = function(){
            var odiv = document.getElementById("menu");
            //  获取滚轮的高度 
            var  scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //获取页面的高度
            var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;

            var Height =parseInt(scrollTop + (windowHeight - odiv.offsetHeight)/2);
            Move(Height);

        }
        window.onscroll = function (){
                var odiv = document.getElementById("menu");
                //  获取滚轮的高度 
                var  scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                //获取页面的高度
                var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;

                var Height =parseInt(scrollTop + (windowHeight - odiv.offsetHeight)/2);
                Move(Height);
            }
        var timer =null; 
        function Move(iTarget){
                clearInterval(timer);
                timer = setInterval(function(){
                    var odiv = document.getElementById("menu");
                    //计算速度
                    var speed= (iTarget - odiv.offsetTop)/8;
                    speed = speed >0 ?  Math.ceil(speed) : Math.floor(speed);

                    if(odiv.offsetTop == iTarget){
                        clearInterval(timer);
                    }else{
                        odiv.style.top = odiv.offsetTop + speed + "px";
                    }
                },50);
            }
        
    </script>
</head>
    <body style = 'height: 3000px'>
        <div id = 'menu'></div>
    </body>
</html>

在这里插入图片描述