前端开发之js基础(12)

最新推荐文章于 2024-04-08 19:14:22 发布

DHRMM999

最新推荐文章于 2024-04-08 19:14:22 发布

阅读量165

点赞数

分类专栏： js特效学习笔记

本文链接：https://blog.csdn.net/DHRMM999/article/details/82717451

版权

js特效学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

js实现返回顶部

css样式

<style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                width: 100%;
                height: 2800px;
                position: relative;
                border: 1px solid #FF0000;
            }
            #box #top{
                position: fixed;
                bottom: 20px;
                right: 20px;
                cursor: pointer;
                display: none;
            }
            #box #content #a{
                font-size: 36px;
                border: 1px solid #FF0000;
                width: 200px;
                text-align: center;
                margin: 0 auto;
            }

        </style>

html

<body>
        <div id="box">
            <div id="top"><img src="../images/topimg/Top.jpg"/></div>
            <div id="content">
                <div id="a">这是顶部</div>
            </div>
        </div>
    </body>

js控制

    <script type="text/javascript">
        var box = document.getElementById("box");
        var img = box.children[0];
        window.onload = function(){ 
            window.onscroll = function(){
                var topimg = scroll().top;
                if(topimg>800){
                    img.style.display = "block";
                }else{
                    img.style.display = "none";
                }
                leader = scroll().top;
            }
        }
        //点击回顶部
        var timer=null;
        var leader = 0;//目标位置
        var target = 0;//显示区域位置
        img.onclick = function(){
            //技术点:window.scrollTo(0,0)
            clearInterval(timer);
            timer = setInterval(function(){
                //获取步长
                var speed = (target - leader)/10;
                //二次处理步长
                speed = speed>0?Math.ceil(speed):Math.floor(speed);
                leader = leader+speed;
                //显示区域移动
                window.scrollTo(0,leader);
                if(leader===0){
                    clearInterval(timer);
                }
            },30);
        }
        //滚动事件
        function scroll(){
            if(window.pageYOffset!=null){
                return {
                    top:window.pageYOffset
                }
            }
        }


    </script>