返回顶部

最新推荐文章于 2022-07-15 10:18:39 发布

狂野的心跳

最新推荐文章于 2022-07-15 10:18:39 发布

阅读量287

点赞数

分类专栏： js 文章标签：返回顶部功能

本文链接：https://blog.csdn.net/guozhangqiang/article/details/79208051

版权

js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

返回页面顶部功能相信大家都不陌生，这里给大家带来鄙人的方法，本人觉得挺好用，代码简洁易懂

PS：返回按钮（背景图片）需在距离顶部300px才会显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回顶部功能</title>
    <style>
        #goTop{
            display:none;
            position:fixed;
            bottom:20px;
            background:url(arrow_input_up.png) no-repeat 0 0;
            width:40px;
            height:40px;
            cursor:pointer;
            right:20px;
        }
    </style>
</head>
<body>
<p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/>
<p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/>
<p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/>
<p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/>
<p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/>
<p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/>
<p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/>
<p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/>
<p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/>
<p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/><p>123</p><br/>
<span id="goTop"></span>
<script>
    window.οnlοad=function(){
        var timer=null;
        var goTop=document.getElementById("goTop");
        goTop.οnclick=function(){
            timer=setInterval(function(){
                var top=document.body.scrollTop+document.documentElement.scrollTop;
                var speed=top/3;
                if(document.body.scrollTop){
                    document.body.scrollTop-=speed;
                }else{
                    document.documentElement.scrollTop-=speed;
                }
                if(top==0){
                    clearInterval(timer);
                }
            },30);
        };
        window.οnscrοll=function(){
            if(document.body.scrollTop+document.documentElement.scrollTop>=300){
                goTop.style.display="block";
            }else{
                goTop.style.display="none";
            }
        };
        window.onmousewheel=function(e){if(e.wheelDelta<0) clearInterval(timer);};
    };
</script>
</body>
</html>

狂野的心跳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
返回顶部

返回页面顶部功能相信大家都不陌生，这里给大家带来鄙人的方法，本人觉得挺好用，代码简洁易懂PS：返回按钮（背景图片）需在距离顶部300px才会显示返回顶部功能 #goTop{ display:none; position:fixed; bottom:20px;
复制链接

扫一扫