js运动实例-带运动的返回顶部效果_js运动返回-优快云博客

本文介绍了一个使用HTML、CSS和JavaScript实现的页面滚动效果案例。通过监听滚动事件和按钮点击事件，实现了平滑滚动到页面顶部的功能，并保持按钮始终位于屏幕底部附近。此案例适用于网页前端开发人员学习参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                height: 2000px;
            }
            #btn{
                width: 60px;
                height: 60px;
                background: #ccc;
                position: absolute;
                right: 20px;
                cursor: pointer;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oBtn=document.getElementById("btn");
                var timer=null;
                var b;

                setTop();

                // 正常情况下 ，定时器执行一下b=1,然后滚动条滚动b=2，即121212这样连续交替，
                // 但如果出现122121222这种2连续出现（即2前面不是1）的情况，说明有其他操作（滚动鼠标滚轮或拖动滚动条的情况）使滚动条发生滚动
                // 此时，应清除定时器
                window.onscroll=function(){

                    if (b!=1) {
                        clearInterval(timer);
                    }

                    setTop();
                    b=2;
                }

                oBtn.onclick=function(){

                    clearInterval(timer);

                    var iCur=iSpeed=0;

                    timer=setInterval(function(){

                        iCur=document.documentElement.scrollTop || document.body.scrollTop;
                        iSpeed=Math.floor( ( 0 - iCur )/8 );

                        if (iCur==0) {
                            clearInterval(timer);
                        }else{
                            document.documentElement.scrollTop = document.body.scrollTop = iCur + iSpeed;
                        }

                        b=1;

                    },30)

                }

                function setTop(){
                    var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;

                    oBtn.style.top=scrollTop + document.documentElement.clientHeight-oBtn.offsetHeight-20+'px';
                }
            }
        </script>
    </head>
    <body>
        <div id="btn"></div>
    </body>
</html>