回到頂部的幾種實現方法
阿新 • • 發佈：2018-12-24
【1】使用預設連結錨點
新增一個a連結，設定a連結的href屬性值為"#top"即可實現
<body> <div>我在頂部</div> <!-- 很多內容 --> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <!-- 很多內容 --> <div><a href="#top">返回頂部</a></div> </body>
【2】href指向特定的id
給頁面頂部元素設定一個id值，將返回頂部a連結的href屬性指向改id屬性的元素
<body> <div id="header">我在頂部</div> <!-- 很多內容 --> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <!-- 很多內容 --> <div><a href="#header">返回頂部</a></div> </body>
【3】使用自定義連結錨點
在頁面頂部定義一個錨點，然後將返回頂部a連結的href屬性指向該錨點
<body> <a name="goTop"></a> <div>我在頂部</div> <!-- 很多內容 --> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <!-- 很多內容 --> <div><a href="#goTop">返回頂部</a></div> </body>
【4】使用簡單的JavaScript指令碼
設定scrollTo(x,y)中的x和y的座標值來滾動到頁面的具體位置
<body>
<div>我在頂部</div>
<!-- 很多內容 -->
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- 很多內容 -->
<div><a href="javascript:window.scrollTo(0,0)">返回頂部</a></div>
</body>【5】火箭上升式返回頂部（jQuery實現）
上面幾種方式實現起來比較簡單，但是效果生硬，直接從底部切換到頂部，沒有一個過渡的動畫。此方法能使頁面動態滾動，同時將按鈕換成一個箭頭標誌，判斷頁面滾動的距離，當頁面滾動到一定的距離後再顯示返回頂部箭頭標誌。這樣的效果更佳生動。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<style>
.header {
color: rgb(243, 152, 6);
width: 100%;
height: 200px;
margin: 0 auto;
text-align: center;
font-size: 20px;
}
.footer {
background: url('goTop.png') no-repeat;
position: fixed;
right: 50px;
bottom: 50px;
width: 54px;
height: 54px;
}
</style>
</head>
<body>
<div class="header">我在頂部</div>
<!-- 很多內容 -->
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- 很多內容 -->
<div class="footer" id="gotoTop"></div>
<script>
function gotoTop(minHeight){
// 定義點選返回頂部圖示後向上滾動的動畫
$("#gotoTop").click(
function(){$('html,body').animate({scrollTop:'0px'},'slow');
})
// 獲取頁面的最小高度，無傳入值則預設為600畫素
minHeight? minHeight = minHeight:minHeight = 600;
// 為視窗的scroll事件繫結處理函式
$(window).scroll(function(){
// 獲取視窗的滾動條的垂直滾動距離
var s = $(window).scrollTop();
// 當視窗的滾動條的垂直距離大於頁面的最小高度時，讓返回頂部圖示漸現，否則漸隱
if( s > minHeight){
$("#gotoTop").fadeIn(500);
}else{
$("#gotoTop").fadeOut(500);
};
});
};
gotoTop();
</script>
</body>