标题:用原生js代码实现点击到顶部(有过渡效果) | 作者: catfish | 时间:2020年01月13日
暂无法显示图片

是利用定时器来实现:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello world!</title>
</head>
<style type="text/css">
    #aaa{
        width: 200px;
        height: 1000px;
        background-color: red;
    }
    #bbb{
        width: 100px;
        height: 100px;
        background-color: blue;
        position: fixed;
        bottom: 10px;
        right: 0;
        cursor: pointer;
        display: none;
    }
</style>
<body>
<div id="aaa">
    <p>asdfjasdkjfasdjflksdjflasdfjds</p>
    <p>aldfjsakljfqeiofjsdakfjsdklfj</p>
</div>
<div id="bbb">点击返回顶部</div>
</body>
<script type="text/javascript">
    window.onscroll = function(){
        oBdiv = document.getElementById('bbb')
        oBdiv.onclick = function(){
            timer = null
            timer = setInterval(function(){
                document.documentElement.scrollTop -= 10;
            }, 1);
        }
        if (document.documentElement.scrollTop == 0){
            if (typeof(timer) != "undefined"){
                clearInterval(timer);
            }
        }
        if(document.documentElement.scrollTop > 100)
        {
            oBdiv.style.display = 'block';
        }
        else
        {
            oBdiv.style.display = 'none';
        }
    }
</script>
</html>

相关知识点

定时器:

setInterval     // 无限执行

setTimeout    // 只执行一次

function show()
{
    alert('a')
}
timer = setInterval(show, 1000);
clearInterval(timer)               // 取消定时器

 

我要评论

没有登录?请先登录后再评论

最新评论

暂无人评论,来抢个沙发吧!