點選返回網頁頂層效果

admin發表於2017-02-10
網頁
很多網頁很為版塊較多，所以頁面特別的長，所以很多網站都有這樣的功能，那就是當網頁下拉一定的長度的時候，會出現一個點選回到頂部的按鈕，例如本站就有這樣的功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
#goTopBtn{
  position:fixed;
  line-height:36px;
  width:36px;
  bottom:35px;
  height:36px;
  cursor:pointer;
  display:none;
  background:#0000CC;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(window).scroll(function(){
    var sc=$(window).scrollTop();
    var rwidth=$(window).width()
    if(sc>0){
      $("#goTopBtn").css("display","block");
      $("#goTopBtn").css("left",(rwidth-36)+"px")
    }
    else{
      $("#goTopBtn").css("display","none");
    }
  })
  $("#goTopBtn").click(function(){
    $('body,html').animate({scrollTop:0},500);
  })
}) 
</script>
</head>
<body>
<div style="height:1000px;"></div>
<div id="goTopBtn"></div>
</body>
</html>

以上程式碼，當向下拖動滾動跳的時候就會出現一個藍色塊，當點選這個塊就會平滑的回到網頁頂部。

下面就簡單介紹一下如何實現此功能:

一.實現原理:

當拖動滾動條的時候就會觸發window的scroll事件，然後判斷$(window).scrollTop()是否大於零（也就是滾動條是否被向下拖動），如果大於零，則藍色小塊就會出現，否則處於隱藏狀態。當點選藍色小塊的時候，就會觸發小塊的點選事件，進而使用animate()方法實現網頁平滑的回到頂端。

程式碼註釋:

1.$(document).ready(function(){}，當文件載入完成之後再去執行其中的程式碼。

2.$(window).scroll(function(){}），為window的scroll事件繫結事件處理函式。

3.var sc=$(window).scrollTop(),獲取網頁垂直偏移量，也就是網頁向下滾動的尺寸。

4.var rwidth=$(window).width()，獲取視窗的寬度。

5.if(sc>0)語句用來判斷是否向下拖動了網頁，如果向下拖動了，則會使用$("#goTopBtn").css("display","block")語句將藍色塊設定為可見，並且通過$("#goTopBtn").css("left",(rwidth-36)+"px")y語句將藍色塊的left屬性值設定為（視窗寬度-36），也就是可以將藍色塊緊貼視窗的右邊緣。否則隱藏該藍色塊。

6.$("#goTopBtn").click(function(){},為藍色塊註冊單擊事件處理函式，此處理函式可以通過animate()函式將平滑的將網頁移到頂端。

相關文章