JavaScript デモ 1

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>

おすすめ