常見的返回頂部大多數都是通過用js 或者 jq寫出來的，但也有少部分直接用的 HTML 錨點實現的，返回頂部這個特效用錨點帶來的使用者體驗不是很好。沒有那種緩衝效果(一閃而過的效果)。所以得用到指令碼，接下來用 jQuery 寫一個簡單常用的返回頂部的效果。

效果如圖：

　　預設效果：

　　出現按鈕：

接下來點選藍色方塊就會回到頁面頂部（可以換成圖片）

實現步驟：

html程式碼：

 1 <div class="top"></div>
 2     <div>
 3         <p>今天天氣很好!</p>
 4         <
 
p>今天天氣很好!</p>
 5         <p>今天天氣很好!</p>
 6         <p>今天天氣很好!</p>
 7         <p>今天天氣很好!</p>
 8         <p>今天天氣很好!</p>
 9         <p>今天天氣很好!</p>
10         <p>今天天氣很好!</p>
11         <p>今天天氣很好!</p>
12         <p>
 
今天天氣很好!</p>
13         <p>今天天氣很好!</p>
14         <p>今天天氣很好!</p>
15         <p>今天天氣很好!</p>
16         <p>今天天氣很好!</p>
17         <p>今天天氣很好!</p>
18         <p>今天天氣很好!</p>
19         <p>今天天氣很好!</p>
20         <p>今天天氣很好!</
 
p>
21         <p>今天天氣很好!</p>
22         <p>今天天氣很好!</p>
23         <p>今天天氣很好!</p>
24         <p>今天天氣很好!</p>
25         <p>今天天氣很好!</p>
26         <p>今天天氣很好!</p>
27         <p>今天天氣很好!</p>
28         <p>今天天氣很好!</p>
29         <p>今天天氣很好!</p>
30         <p>今天天氣很好!</p>
31         <p>今天天氣很好!</p>
32         <p>今天天氣很好!</p>
33         <p>今天天氣很好!</p>
34         <p>今天天氣很好!</p>
35         <p>今天天氣很好!</p>
36         <p>今天天氣很好!</p>
37         <p>今天天氣很好!</p>
38         <p>今天天氣很好!</p>
39         <p>今天天氣很好!</p>
40         <p>今天天氣很好!</p>
41         <p>今天天氣很好!</p>
42         <p>今天天氣很好!</p>
43         <p>今天天氣很好!</p>
44         <p>今天天氣很好!</p>
45         <p>今天天氣很好!</p>
46         <p>今天天氣很好!</p>
47         <p>今天天氣很好!</p>
48         <p>今天天氣很好!</p>
49         <p>今天天氣很好!</p>
50         <p>今天天氣很好!</p>
51         <p>今天天氣很好!</p>
52     </div>

簡單寫一下樣式

css程式碼：

 1 * {
 2             margin: 0;
 3             padding: 0;
 4             list-style: none;
 5             border: none;
 6         }
 7         
 8         body {
 9             background-color: #ccc;
10         }
11         
12         p {
13             margin-bottom: 20px;
14             text-align: center;
15         }
16         
17         .top {
18             width: 80px;
19             height: 80px;
20             background-color: #00a4e4;
21             position: fixed;
22             right: 10px;
23             bottom: 10px;
24         }

jQuery程式碼：

 1 // 先引入第三方的jq檔案
 2  <script src="./jquery/jquery-3.4.1.js"></script>
 3     <script>
 4         $(function() {
 5             // 先隱藏回到頂部按鈕
 6             $(".top").hide();
 7 
 8             $(window).scroll(function() {
 9                 // 判斷scrollTop的相容
10                 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
11                 // 判斷滾動的距離
12                 if (scrollTop > 150) {
13                     // 大於150顯示回到頂部按鈕
14                     $(".top").show();
15                 } else {
16                     // 否則隱藏按鈕
17                     $(".top").hide();
18                 }
19             })
20             $(".top").click(function() {
21                 // 呼叫jq的animate函式實現動畫效果
22                 $('html,body').animate({
23                     scrollTop: 0
24                 }, 1000);
25             })
26         })
27     </script>

然後效果就能實現啦~ 就會看到緩慢的回到頁面頂部！ 實現的方法有很多，找到適合的解決辦法就可以。