javascript 緩動返回頂部案例

時間 2019-11-09
原文原文鏈接
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>document</title>
 8     <style media="screen">
 9  img {
 10  position: fixed;
 11  bottom: 100px;
 12  right: 50px;
 13  cursor: pointer;
 14  display: none;
 15  border: 1px solid #ddd;
 16         }
 17  div {
 18  width: 800px;
 19  margin: 80px auto;
 20  font: 500 18px/1.5 "simSun";
 21  color: darkorange;
 22         }
 23     </style>
 24 </head>
 25 <body>
 26     <img src="images/Top.jpg" alt="">
 27     <div>
 28  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa porro numquam modi. Nulla, in maxime numquam iure debitis consequatur quasi quae consequuntur vitae omnis, commodi rem quibusdam quisquam dolores quo ut ipsam. Doloremque aliquam ipsum vero tenetur cumque eveniet quo cupiditate et ullam eum mollitia cum, eos aspernatur dicta accusamus, fugit deserunt fuga, veritatis natus in ratione voluptas, laboriosam facilis! Similique debitis, repellendus corrupti perspiciatis cum accusantium maxime nam facere architecto quasi aut quod, iusto dignissimos cumque necessitatibus! Accusantium culpa,  29     <br>
 30     <br> adipisci natus quas quae quia tempore perspiciatis dolorem ut explicabo sequi, sit! Ab ducimus placeat expedita iusto maiores vel animi, quasi id rem omnis dolorum tenetur explicabo veritatis. Praesentium ullam, architecto veniam voluptatibus molestias doloribus sed aperiam ipsam iusto cum nisi vero nostrum officia quae, sit hic commodi! Modi laborum porro hic provident tempora. Error libero itaque vitae molestias dolore tempore repellat sed cum voluptate explicabo officiis aliquid, vero modi, possimus fugit ipsam reiciendis minima. Saepe asperiores fugiat pariatur, vero beatae, blanditiis. Aliquid consequuntur omnis minima voluptas obcaecati mollitia odio eum ex repellendus rerum, laboriosam molestias,  31     <br>
 32     <br> veniam, aliquam dolorum! Vel eaque, modi vero autem molestias doloribus quae facere, accusamus enim atque amet. Commodi, saepe temporibus quaerat veritatis omnis, nemo facere odit beatae iusto doloremque consequatur odio harum! Facere dolores provident cum, corporis iure nulla nostrum dolorum minus in quaerat laboriosam vero sequi delectus quos perferendis maxime quas, consectetur quis aliquam illo et temporibus. Temporibus veritatis sequi, mollitia rem eveniet repellat quos in nulla! Deleniti magni fugitbr  33     <br>
 34     <br>dicta, ea debitis natus molestiae itaque nam, ab quidem enim ex optio, eaque, qui perferendis modi. Omnis in voluptate necessitatibus saepe, vero quas vitae cumque sint sequi, ad sapiente nemo illum eum quidem, rerum laudantium commodi dicta facilis veniam molestias quis maxime nisi? Dolor delectus sapiente eveniet ipsam pariatur, fuga quos rerum officia nostrum aliquam temporibus odio minus quod earum libero mollitia quas blanditiis. Minus voluptates, numquam repudiandae unde odio ducimus quaerat eligendi veniam debitis facilis esse iste saepe  35     <br>
 36     <br>cum iure? Alias voluptate praesentium beatae mollitia debitis a dolorum, incidunt blanditiis maxime. Deleniti debitis quae minus eaque tempore vel eligendi a neque ad, incidunt nobis in sit obcaecati dolore. Ex earum cum distinctio fugiat eligendi adipisci, debitis atque, non eius iusto, consectetur magnam sapiente quo repellendus. Natus in itaque possimus eos, repudiandae debitis necessitatibus vero facere eveniet animi, minus sint illo dicta. Odit, ad temporibus non laboriosam, error maiores earum reprehenderit illo nisi vel est fugiat magni eius tempora tempore! Quaerat modi omnis est, ipsa expedita blanditiis. Voluptas qui modi nulla earum fuga perspiciatis mollitia et placeat, provident cum molestiae ab veritatis, consequatur necessitatibus sequi, nihil error quibusdam odit. Distinctio mollitia, repudiandae magni minus aliquid harum aperiam illum in? Hic, quaerat illo deserunt nihil voluptatem molestiae cupiditate, quis dolores unde aperiam minus. Aspernatur asperiores aliquam fugit non animi, dolor, perferendis delectus similique tempora? Sed ex beatae natus voluptate maiores laudantium voluptatem, quo earum praesentium repellat odit, vel fuga tenetur cum id, iure fugit sapiente repellendus  37     <br>
 38     <br>perspiciatis totam. Veritatis, modi consequuntur dolore vero repudiandae distinctio sit maxime sapiente. Quisquam tempora laborum sed excepturi natus debitis porro corrupti cum voluptatem vitae, odit, officia ullam illo officiis odio consequatur expedita possimus! Dicta placeat nulla numquam hic itaque molestiae asperiores assumenda similique id eos vero earum, ea fugiat esse blanditiis excepturi obcaecati sequi! Sapiente est, nostrum non saepe, facere velit placeat voluptas, sit molestiae rem soluta  39     <br>
 40     <br>iure itaque illum! Rem repellendus, explicabo asperiores accusantium, deleniti aperiam accusamus reiciendis alias dolore modi ipsum beatae dolor praesentium. Maiores amet molestias pariatur in animi ipsa nobis deleniti nulla voluptatum rerum sapiente culpa minima reiciendis voluptatem, nam, impedit fuga, esse delectus enim repellat, laboriosam quod sunt repellendus! Pariatur perferendis voluptates  41     <br>
 42     <br>error rem non, ullam laudantium? Quidem nisi quos debitis, unde obcaecati cumque animi autem atque facere neque incidunt itaque esse error harum asperiores fuga distinctio culpa. Reprehenderit minus deserunt nobis repellendus et provident, inventore commodi sed laudantium! Saepe inventore vel mollitia maiores eum dolor quia esse, facilis magni, exercitationem suscipit, vero magnam qui aut culpa molestias neque porro.  43 </div>
 44 
 45 <script type="text/javascript">
 46     var img = document.getElementsByTagName("img")[0];  47  window.onscroll = function(){  48         //被捲去的距離>200，顯示返回頂部圖標
 49         //不然隱藏
 50         if (scroll().top > 1000) {  51  img.style.display = "block";  52  }else {  53  img.style.display = "none";  54  }  55 
 56         //每次移動滾動條的時候都給leader賦值，模擬leader獲取頂部的距離
 57  leader = scroll().top;  58  }  59         //緩動跳轉到頁面最頂端
 60         var timer = null;  61         var target = 0; //目標位置
 62         var leader = 0; //顯示區域自身的位置
 63 
 64  img.onclick = function(){  65             //技術點：window.scrollTo(0,0)
 66             //要用定時器，先清定時器
 67  clearInterval(timer);  68  timer = setInterval(function(){  69                 //獲取步長
 70                 var step = (target - leader) / 10;  71                 //二次處理步長
 72  step = step > 0 ? Math.ceil(step) : Math.floor(step);  73  leader = leader + step;  74                 //顯示區域移動
 75  window.scrollTo(0,leader);  76                 //window.scrollTo(x,y); x:橫向滾動條的座標; y:縱向滾動條的座標;
 77                 //清除定時器
 78                 if (leader === 0) {  79  clearInterval(timer);  80  }  81  },30);  82  }  83 
 84 
 85     function scroll(){ //開始封裝要用的scrollTop
 86         if (window.pageYOffset != null) {  87             //由於window.pageYOffset的默認值是0，因此須要判斷
 88             return {  89  left: window.pageXOffset,  90  top: window.pageYOffset  91  }  92  }else if (document.compatMode === "CSS1Compat") {  93             //標準瀏覽器，來判斷有沒有聲明DTD
 94             return {  95  left: document.documentElement.scrollLeft,  96  top: document.documentElement.scrollTop  97  }  98  }  99         return { 100             //未聲明DDTD
101  left: document.body.scrollLeft, 102  top: document.body.scrollTop 103  } 104  } 105 </script>
106 </body>
107 </html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。