js运动实例-带运动的返回顶部效果

最新推荐文章于 2022-11-07 15:56:17 发布

della_uii

最新推荐文章于 2022-11-07 15:56:17 发布

阅读量388

点赞数

分类专栏： JavaScript 文章标签：返回顶部效果

本文链接：https://blog.csdn.net/Della_UI/article/details/53150029

版权

JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!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>

della_uii

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js运动实例-带运动的返回顶部效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ height: 2000px; } #btn
复制链接

扫一扫

专栏目录