JavaScript实现点击图片回到顶部 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8         <title>Document</title>
  9         <style>
 10             * {
 11                 margin: 0;
 12                 padding: 0;
 13             }
 14 
 15             .content {
 16                 margin: 0 auto;
 17                 width: 790px;
 18             }
 19 
 20             #to-top {
 21                 position: fixed;
 22                 width: 99px;
 23                 height: 175px;
 24                 background: url(./images/huojian1.jpg) no-repeat;
 25                 right: 20px;
 26                 bottom: 10px;
 27                 display: none;
 28             }
 29         </style>
 30 
 31     </head>
 32 
 33     <body>
 34         <div class="content">
 35             <img src="./images/0.jpg" alt="">
 36             <img src="./images/1.jpg" alt="">
 37             <img src="./images/2.jpg" alt="">
 38             <img src="./images/3.jpg" alt="">
 39             <img src="./images/4.jpg" alt="">
 40             <img src="./images/5.jpg" alt="">
 41             <img src="./images/6.jpg" alt="">
 42             <img src="./images/0.jpg" alt="">
 43             <img src="./images/1.jpg" alt="">
 44             <img src="./images/2.jpg" alt="">
 45             <img src="./images/3.jpg" alt="">
 46             <img src="./images/4.jpg" alt="">
 47             <img src="./images/5.jpg" alt="">
 48             <img src="./images/6.jpg" alt="">
 49             <img src="./images/0.jpg" alt="">
 50             <img src="./images/1.jpg" alt="">
 51             <img src="./images/2.jpg" alt="">
 52             <img src="./images/3.jpg" alt="">
 53             <img src="./images/4.jpg" alt="">
 54             <img src="./images/5.jpg" alt="">
 55             <img src="./images/6.jpg" alt="">
 56         </div>
 57         <!-- <a href="javascript:void(0);" id="to-top"></a> -->
 58         <a id="to-top" href="####"></a>
 59         <script>
 60             //设置定时器
 61             var timer=null;
 62             //设置标识位
 63             var isTop=true;
 64             //获取“回到顶部”的DOM
 65             var toTop = document.getElementById('to-top')
 66             // 获取可视区的高度
 67             var clientHeight = document.documentElement.clientHeight;
 68             // 获取滚轮距离顶部的距离
 69             window.onscroll = function () {
 70                 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
 71                 if (scrollTop >= clientHeight) {
 72                     toTop.style.display = "block"
 73                 } else {
 74                     toTop.style.display = 'none'
 75                 }
 76             }
 77             // 没到顶部切换为第一张图
 78             if(!isTop){
 79                 toTop.style.background="url(./images/huojian1.jpg) no-repeat"
 80                 clearInterval(timer)
 81             }
 82             //回到顶部
 83             toTop.onclick = function () {
 84                 // 用计时器的目的是为了制造缓动效果
 85                 timer = setInterval(function () {
 86                     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 87                     // 设置速度
 88                     var speed = Math.floor(- scrollTop / 5);
 89                     document.documentElement.scrollTop = document.body.scrollTop = scrollTop + speed;
 90 
 91                     //滚动时切换第二张图
 92                     toTop.style.background="url(./images/huojian2.jpg) no-repeat"
 93                     isTop=true;
 94                     if(scrollTop==0){
 95                         clearInterval(timer)
 96                     }
 97                 }, 50)
 98             }
 99 
100         </script>
101     </body>
102 
103 </html>

 

posted @ 2021-03-07 20:04  东功  阅读(297)  评论(0)    收藏  举报