js 简单回到顶部 

  8 <!DOCTYPE html>
  9 <html lang="en">
 10 
 11 <head>
 12   <meta charset="UTF-8">
 13   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 14   <title>回到顶部</title>
 15   <style>
 16     * {
 17       margin: 0;
 18       padding: 0;
 19       font-family: '微软雅黑';
 20       color: #ffffff;
 21       font-size: 30px;
 22       text-align: center;
 23     }
 24 
 25     div {
 26       width: 100%;
 27     }
 28 
 29     #header {
 30       background-color: #aaaaaa;
 31       line-height: 100px;
 32     }
 33 
 34     #nav {
 35       line-height: 50px;
 36       background-color: #888888;
 37       position: static;
 38       top: 0;
 39     }
 40 
 41     #main {
 42       line-height: 200px;
 43       color: #888888;
 44     }
 45 
 46     #toTop {
 47       width: 50px;
 48       height: 50px;
 49       position: fixed;
 50       display: none;
 51       top: 80%;
 52       left: 5%;
 53     }
 54   </style>
 55 </head>
 56 
 57 <body>
 58   <div id="header">header</div>
 59   <div id="nav">nav</div>
 60   <div id="main">main<br />main<br />main<br />main<br />main</div>
 61   <svg id="toTop" xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024" width="200" height="200"
 62     t="1565094469045" p-id="1475" version="1.1">
 63     <path fill="#0088ff"
 64       d="M 752.736 431.063 C 757.159 140.575 520.41 8.97 504.518 0.41 V 0 l -0.45 0.205 l -0.41 -0.205 v 0.41 c -15.934 8.56 -252.723 140.165 -248.259 430.653 c -48.21 31.457 -98.713 87.368 -90.685 184.074 c 8.028 96.666 101.007 160.768 136.601 157.287 c 35.595 -3.482 25.232 -30.31 25.232 -30.31 l 12.206 -50.095 s 52.47 80.569 69.304 80.528 c 15.114 -1.23 87 -0.123 95.6 0 h 0.82 c 8.602 -0.123 80.486 -1.23 95.6 0 c 16.794 0 69.305 -80.528 69.305 -80.528 l 12.165 50.094 s -10.322 26.83 25.272 30.31 c 35.595 3.482 128.574 -60.62 136.602 -157.286 c 8.028 -96.665 -42.475 -152.617 -90.685 -184.074 Z m -248.669 -4.26 c -6.758 -0.123 -94.781 -3.359 -102.891 -107.192 c 2.95 -98.714 95.97 -107.438 102.891 -107.93 c 6.964 0.492 99.943 9.216 102.892 107.93 c -8.11 103.833 -96.174 107.07 -102.892 107.192 Z m -52.019 500.531 c 0 11.838 -9.42 21.382 -21.012 21.382 a 21.217 21.217 0 0 1 -21.054 -21.34 V 821.74 c 0 -11.797 9.421 -21.382 21.054 -21.382 c 11.591 0 21.012 9.585 21.012 21.382 v 105.635 Z m 77.333 57.222 a 21.504 21.504 0 0 1 -21.34 21.626 a 21.504 21.504 0 0 1 -21.34 -21.626 V 827.474 c 0 -11.96 9.543 -21.668 21.299 -21.668 c 11.796 0 21.38 9.708 21.38 21.668 v 157.082 Z m 71.147 -82.043 c 0 11.796 -9.42 21.34 -21.053 21.34 a 21.217 21.217 0 0 1 -21.013 -21.34 v -75.367 c 0 -11.755 9.421 -21.299 21.013 -21.299 c 11.632 0 21.053 9.544 21.053 21.3 v 75.366 Z"
 65       p-id="1476" /></svg>
 66   <script>
 67     var headerHeight = document.getElementById('header').offsetHeight; //头部高度
 68     var nav = document.getElementById('nav');
 69     var main = document.getElementById('main');
 70     var toTop = document.getElementById('toTop');
 71 
 72     //回到页首1；
 73     var toTopTimer = null
 74     toTop.onclick = function () {
 75       clearInterval(toTopTimer);
 76       toTopTimer = setInterval(() => {
 77         st = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop; // scrollTop
 78         window.scrollBy(0, -Math.ceil(st / 10)); //相对滚动，缓东效果
 79         if (st == 0) {
 80           clearInterval(toTopTimer);
 81         }
 82       }, 10);
 83     };
 84     window.onscroll = () => {
 85       st = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop; // scrollTop
 86       // 固定导航代码
 87       if (st > headerHeight) { // 到达导航是
 88         nav.style.position = 'fixed';
 89         main.style.paddingTop = nav.offsetHeight + 'px'; //腾出main被占用的空间
 90       } else {
 91         nav.style.position = 'static';
 92         main.style.paddingTop = '0px';
 93       }
 94       // 回到页首2；
 95       if (st > 150) { //当超出部分多余150
 96         toTop.style.display = 'block'; // 显示回到顶部、
 97       } else {
 98         toTop.style.display = 'none'
 99       }
100     }
101   </script>
102 </body>
103 
104 </html>

 

 
posted @ 2020-05-16 14:13  金刚奥特曼  阅读(112)  评论(0)    收藏  举报