JavaScript 回到顶部效果

<!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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值