js-页面回到顶部

js–页面回到顶部

云烟 • 2024年 5月 7日上午10:00 • 未分类

欢迎大家来到IT世界,在知识的湖畔探索吧!

很久都没有去慕课网学习学习了，刚恰好就看见了一个用的比较多的小例子——页面回到顶部，记得之前自己也是在初学web时，被这个坑了一回，因此今天特地拿来分享分享……

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面回到顶部</title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
    <script type="text/javascript" src="myjs.js"></script>    
</head>
<body>
    <a href="javascript:;" id="btn" title="回到顶部"></a>
    <div class="bg">
        <img src="images/tb_bg.jpg" alt="" />
    </div>
</body>
</html>

欢迎大家来到IT世界,在知识的湖畔探索吧!

其中需要引入自己写的一个样式文件和一个js文件：

欢迎大家来到IT世界,在知识的湖畔探索吧!    #btn {
        width: 40px;
        height: 40px;
        position: fixed;
        display: none;
        right: 65px;
        bottom: 10px;
        background: url(images/top_bg.png) no-repeat left top;
    }
    
    #btn:hover {
        background: url(images/top_bg.png) no-repeat 0 -39px;
    }
    
    .bg {
        width: 1190px;
        margin: 0 auto;
    }

js文件：

//页面加载完毕后触发
window.onload = function {
    var obtn = document.getElementById('btn');
    var clientHeight=document.documentElement.clientHeight;//获取页面可视区域的高度
    var timer = null; //存放定时器
    var isTop=true;
    //滚动条滚动时触发
    window.onscroll=function{
        var osTop = document.documentElement.scrollTop || document.body.scrollTop;
        if(osTop>=clientHeight){
 obtn.style.display="block";
        }else{
 obtn.style.display="none";
        }
        if(!isTop){
 clearInterval(timer);
        }
        isTop=false;
    }
    obtn.onclick = function {
        timer = setInterval(function { //设置定时器
 //获取滚动条距离顶部的高度
 var osTop = document.documentElement.scrollTop || document.body.scrollTop;
 var ispeed=osTop/5;
 document.documentElement.scrollTop = document.body.scrollTop =osTop-ispeed;
 isTop=true;
 if(osTop==0){
 clearInterval(timer);
 }
        }, 30);
    }
}

文件存放路径：

js--页面回到顶部

基本“回到顶部”效果就这样子实现，只是我不会在文章中添加动态效果（就是实时的添加这个动态效果图），求大神赐教！

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/49832.html