jQuery返回頂部按鈕詳解

admin發表於2017-10-23
jQuery

返回頂部按鈕在很多網站都有應用，也確實非常的人性化，但是有些網站可能會更進一步，那就是在預設狀態下，返回頂部按鈕在預設狀態下是隱藏的，只有向下拖動滾動條一定的距離，按鈕才會顯示，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
body{
  margin:0px;
  padding:0px;
  height:1500px;
}
.top{
  width:50px;
  height:50px;
  background:green;
  position:fixed;
  right:5px;
  bottom:20px;
  display:none;
}
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript">
$(function(){
  $(window).bind('scroll',function(){
    if($(document).scrollTop()>200){ 
      $(".top").show(); 
    }
    else{ 
      $(".top").hide(); 
    } 
  }) 
  $(".top").click(function(){ 
    $('body,html').animate({scrollTop:0},1000); 
  }) 
}) 
</script>
</head> 
<body> 
<div class="top"></div>
</body> 
</html>

一.實現原理:

返回頂部的按鈕通常是固定在網頁的右下側，這樣我們可以設定按鈕的定位方式為position:fixed，然後通過定位方式將其固定於右下角，同時將其設定為不可見狀態。當向下拖動滾動條的時候，當到達指定的位置，那麼就將其設定為可見，點選按鈕可以是網頁返回頂部，當向下拖動的距離小於指定的距離，此按鈕又會被隱藏，更多內容可以看程式碼註釋。

二.程式碼註釋:

（1）.$(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.$(window).bind('scroll',function(){})，為視窗註冊scroll事件處理函式。

（3）.if($(document).scrollTop()>200){$(".top").show();}，網頁向上滾動距離超過200px，那麼就顯示按鈕。

（4）.else{$(".top").hide();}，否則將會隱藏按鈕。

（5）. $(".top").click(function(){$('body,html').animate({scrollTop:0},1000);})，為按鈕註冊click事件處理函式，此函式能夠以動畫方式將scrollTop屬性值在1秒內設定為0，也就是滾動到頂部。

三.相關閱讀:

（1）.bind()函式可以參閱javascript bind()一章節。

（2）.scrollTop()函式可以參閱jQuery scrollTop()一章節。  

（3）.animate()函式可以參閱jQuery animate()一章節。 

相關文章