返回头部小箭头

最新推荐文章于 2022-11-08 10:34:51 发布

zuo_zuo_blog

最新推荐文章于 2022-11-08 10:34:51 发布

阅读量941

点赞数 1

分类专栏：ＪａｖａＳｃｒｉｐｔ

本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/89714809

版权

ＪａｖａＳｃｒｉｐｔ专栏收录该内容

105 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            position: fixed;
            bottom:100px;
            right:50px;
            border: 1px solid #cccccc;
            display: none;
        }
        div {
            text-align: center;
            width: 1210px;
            margin: 100px auto;
            font: 500 26px/35px "微软雅黑";
        }
    </style>
    <script src="js/my.js"></script>
    <script>
        window.onload=function () {
            var img=document.getElementsByTagName("img")[0];
            window.onscroll=function () {
                if(scroll().top>100){
                    img.style.display="block";
                }else{
                    img.style.display="none";
                }
                leader=scroll().top;
            }
            var timer=null;
            var target=0;
            var leader=0;
            img.onclick=function () {
            /*    window.scrollTo(0,0);*/
                clearInterval(timer);
               timer= setInterval(function () {
                    var step=(target-leader)/10;
                   step=step>0?Math.ceil(step):Math.floor(step);
                   leader=leader+step;
                   window.scrollTo(0,leader);
                   if(leader===0){
                       clearInterval(timer);
                   }
                },20);
            }
        }
    </script>
</head>
<body>
<img  src="images/Top.jpg" alt="">
<div>
    野火烧不尽，春风吹又生！<br>
    野火烧不尽，春风吹又生！<br>
    野火烧不尽，春风吹又生！<br>
    野火烧不尽，春风吹又生！<br>
    野火烧不尽，春风吹又生！<br>
    野火烧不尽，春风吹又生！<br>
    野火烧不尽，春风吹又生！<br>
    野火烧不尽，春风吹又生！<br>
    野火烧不尽，春风吹又生！<br>
    野火烧不尽，春风吹又生！<br>
    野火烧不尽，春风吹又生！<br>
    野火烧不尽，春风吹又生！<br>
    野火烧不尽，春风吹又生！<br>
    野火烧不尽，春风吹又生！<br>
    野火烧不尽，春风吹又生！<br>
    野火烧不尽，春风吹又生！<br>
    野火烧不尽，春风吹又生！<br>
    野火烧不尽，春风吹又生！<br>
    野火烧不尽，春风吹又生！<br>
    野火烧不尽，春风吹又生！<br>
    野火烧不尽，春风吹又生！<br>
    野火烧不尽，春风吹又生！<br>
</div>
</body>
</html>

zuo_zuo_blog

关注

1
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> img{ position: fixed; ...
复制链接

扫一扫

专栏目录