用JavaScript实现网页滚动 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8     <style>
 9         .page-btn{
10             position: fixed;
11             bottom:20px;
12             right: 20px;
13             display: none;
14         }
15     </style>
16 </head>
17 <body>
18     <div class="nav">这是导航栏</div>
19     <button class="page-btn">回到首页</button>
20     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
21     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
22     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
23     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
24     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
25     <script>
26         var btnEl=document.querySelector('.page-btn')
27         btnEl.addEventListener('click',function(){
28             window.scrollTo(0,0);
29             //回到首页
30         })
31         //当页面滑动到pageY>300将其显示,否则隐藏
32         var sY//sY表示window.scrollY
33         window.addEventListener('scroll',function(){
34             sY=window.scrollY;
35             console.log(window.scrollY);
36             if(scrollY>300){
37                 btnEl.style.display='block'
38             }else{
39                 btnEl.style.display='none'
40             }
41         })
42     </script>
43 </body>
44 </html>

 

posted @ 2022-11-06 16:49  theYT  阅读(98)  评论(0)    收藏  举报