<一>錨點

使用錨擊該鏈接即可返回到該錨點所在的頂部位置。

1         <div id="top"></div>
2         <div id="page_two">
3             <button id="link_div">
4                 <a href="#top" id="link">回到頂部</a>
5             </div>
6         </div>

附css代碼：

 1
 
 #top{
 2     width: 100%;
 3     height: 631px;
 4     background-color: #ff572275;
 5 }
 6 
 7 #page_two{
 8     width: 100%;
 9     height: 631px;
10     background-color: #673ab778;
11 }
12 
13 #link_div{
14     width: 50px;
15     height: 50px;
16     background-color: black;
17     position
 
: fixed;
18     left: 50px;
19     bottom: 50px;
20     border: none;
21 }
22 
23 #link{
24     color: white;
25     font-size: 18px;
26     text-decoration: none;
27 }

<二>scrollTop

scrollTop屬性表示被隱藏在內容區域上方的像素數。元素未滾動時，scrollTop的值為0，如果元素被垂直滾動了，scrollTop的值大於0.

html:

1 <
 
button id="link_div_two">回到頂部</button>

附css:

 1 #link_div_two{
 2     width: 50px;
 3     height: 50px;
 4     background-color: black;
 5     position: fixed;
 6     left: 150px;
 7     bottom: 50px;
 8     border: none;
 9     color: white;
10     font-size: 18px;
11 }

javascript:

1     document.getElementById("link_div_two").onclick=function(){
2         document.body.scrollTop = document.documentElement.scrollTop = 0;
3     }

<三>scrollTo()
scrollTo(x,y)方法滾動當前window中顯示的文檔，讓文檔中由坐標x和y指定的點位於顯示區域的左上角
設置scrollTo(0,0)可以實現回到頂部的效果

html：

1 <button id="link_div_three">回到頂部</button>

附css:

 1 #link_div_three{
 2     width: 50px;
 3     height: 50px;
 4     background-color: black;
 5     position: fixed;
 6     left: 250px;
 7     bottom: 50px;
 8     border: none;
 9     color: white;
10     font-size: 18px;
11 }

javascript:

1     document.getElementById("link_div_three").onclick=function(){
2         scrollTo(0,0);
3     }

這個小demo長這樣：

博客初體驗——網頁中三種簡單的回到頁面頂部效果