javascriptdemo1

yanqiu12138

已于 2023-01-17 19:50:43 修改

阅读量369

点赞数

分类专栏： none 文章标签： javascript 前端 html

于 2023-01-11 21:45:26 首次发布

本文链接：https://blog.csdn.net/yanqiu12138/article/details/128651478

版权

none 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

111111111

<!DOCTYPE html>
<html lang="zh-CN" xml:lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是网页标题</title>
    <meta name="description" content="内容描述" />
    <meta name="keywords" content="关键字" />
    <meta name="robots"content="none"> 
    <meta name="author"content="jinhao"> 
    <meta name="generator"content="vsCode"/> 
    <link rel="stylesheet" href="">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="shortcut icon " href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./demo01.css">
</head>
<body>
    <button id="yanqiu">
        <img src="#" alt="">
    </button>
</body>
</html>

CSS部分

        body{
            height: 31415926px;

        }
        img{
            height: 200px;
            width: 200px;
        }
        #yanqiu{
            position: fixed;
            right: 20px;
            bottom: 20px;
            display: block;
        }
        
    </style>

JS部分

    <script>
        window.onscroll=function(){
            if(document.documentElement.scrollTop>0){
                anniu.style.display='block'
            }else{
                anniu.style.display='none'
            }
        }
        yanqiu.onclick=function(){
            timer = setInterval(function(){
                var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
                var Speed=Math.floor(0-scrollTop/5);
                if(scrollTop == 0){
                    
                    clearInterval(timer);
                }
                jieguo=true;
                document.documentElement.scrollTop=document.body.scrollTop=scrollTop+Speed;
            }, 100);
        }
    
    </script>