jquery實現的點選返回頂部和底部特效詳解

antzone發表於2017-03-17
jQuery特效

本章節介紹一下如何利用jquery實現返回頂部和底部的效果，這種效果在長篇幅的網站中經常遇到，是非常人性化的效果，以前需要拖動滾動條實現的效果，只要點選一個按鈕即可實現，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.box{
  height:200px;
  width:100%;
  background:#ccc;
  margin:10px 0;
}
.location{
  position:fixed;
  right:0;
  bottom:10px;
  width:20px;
  background:#FFC;
  padding:5px;
  cursor:pointer;
  color:#003
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function($){
  $('.scroll_top').click(function(){
    $('html,body').animate({scrollTop:'0px'},800);
  }) 
  $('.scroll_bottom').click(function(){
    $('html,body').animate({scrollTop:$('.bottom').offset().top},800);
  })
})
</script>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box bottom"></div>
<div class="location">
  <p class="scroll_top">返回頂部</p>
  <p class="scroll_bottom">滑到底部</p>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，點選響應按鈕可以實現返回頂部和底部的功能，下面介紹一下它的實現過程。

一.程式碼註釋:

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

2.$('.scroll_top').click(function(){})，為p元素註冊click事件處理函式，點選它可以返回頂部。

3.$('html,body').animate({scrollTop:'0px'},800)，以動畫的方式將body元素的scrollTop設定為0，也就是返回頂部。

4.$('html,body').animate({scrollTop: $('.bottom').offset().top},800)，設定body的scrollTop屬性值為 $('.bottom').offset().top值，這個值並不是精準的返回底部的值，但是通過設定已經完全可以滿足。

二.相關閱讀:

1.click事件可以參閱jQuery click 事件一章節。

2.animate()函式可以參閱jQuery animate()一章節。

3.scrollTop屬性可以參閱js scrollTop一章節。 

4.offset()函式可以參閱jQuery offset()一章節。

相關文章