JavaScript 回到顶部效果

最新推荐文章于 2023-01-11 14:59:16 发布

D000

最新推荐文章于 2023-01-11 14:59:16 发布

阅读量353

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u011171159/article/details/53895189

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript 回到顶部效果</title>
    <style>
    .box{
        width: 1000px;
        margin: 0 auto;
    }
    .btn{
        position: fixed;
        right: 30px;
        bottom: 30px;
        width: 40px;
        height: 40px;
        background-image: url('top_bg.png');
        background-position: 0 0;
        background-repeat: no-repeat;
        display: none;
    }
    .btn:hover{
        background-position: 0 -40px;
    }
    </style>
</head>
<body>
    <div class="box">
        <img src="demo.png" alt="">
    </div>
    <a href="javascript:;" class="btn" id="btn"></a>


    <script>
    /*
    DOM操作
        1.document.getElementById() 根据id获取标签元素
        2.document.documentElement.scrollTop    滚动条的数值，可读写
    事件运用
        1.window.onload 页面加载完后触发
        2.onclick 点击后触发
        3.window.onscroll   滚动条滚动时触发
    定时器
        1.setInterval() 设置定时器，需要传2个参数
        2.clearInterval() 关闭定时器，需要传1个参数
    */
    window.onload = function(){
        var obtn = document.getElementById('btn');
        // 获取页面可视区的高度
        var clientHeight = document.documentElement.clientHeight;
        console.log(clientHeight);
        var timer = null;
        var isTop = true;
        // 滚动条滚动时触发
        window.onscroll = function(){
            // 获取滚动条距离顶部的高度
            // 兼容问题  IE || chrome
            var osTop = document.documentElement.scrollTop || document.body.scrollTop;
            console.log('gundongz');
            if(osTop >= clientHeight){
                obtn.style.display = 'block';
            }else{
                obtn.style.display = 'none';
            }
            if(!isTop){
                clearInterval(timer);
            }

            isTop = false;
        }
        obtn.onclick = function(){
            // 设置定时器
            timer = setInterval(function(){
                // 获取滚动条距离顶部的高度
                // 兼容问题  IE || chrome
                var osTop = document.documentElement.scrollTop || document.body.scrollTop;
                console.log(osTop);
                var ispeed = Math.floor(-osTop / 10);
                document.documentElement.scrollTop = document.body.scrollTop = osTop+ispeed;
                isTop = true;
                if(osTop == 0){
                    // 清除定时器
                    clearInterval(timer);
                }
            },30)

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