快捷導(dǎo)航

jQuery創(chuàng)建平滑的頁面滾動(dòng)(頂部或底部)

更新時(shí)間：2013年02月26日 10:44:10 作者：

如何創(chuàng)建一個(gè)平滑的滾動(dòng)效果是本文的目的使用jQuery讓您可以滾動(dòng)到你的網(wǎng)頁的頂部或底部,相當(dāng)不錯(cuò)的一個(gè)效果，感興趣的你可不要錯(cuò)過了哈

在這篇文章中，我將通過本教程向您展示了如何創(chuàng)建一個(gè)平滑的滾動(dòng)效果，使用jQuery。讓您可以滾動(dòng)到你的網(wǎng)頁的頂部或底部

它是如何工作的
首先，加載jquery庫在</ head>標(biāo)簽結(jié)束前：

復(fù)制代碼代碼如下:

 
<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery1.3.2.js"></script>jQuery滾動(dòng)到底部： 

鏈接：
<a href="#" class="scrollToBottom">Scroll to bottom</a>jQuery

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$(document).ready(function(){ 
// Scroll page to the bottom 
$('a.scrollToBottom').click(function(){ 
$('html, body, .content').animate({scrollTop: $(document).height()}, 300); 
return false; 
}); 
}) 
</script> 

它是如何工作的：
第一行代碼在頁面加載之前執(zhí)行
$(document).ready(function(){當(dāng)連接的.scrollToBottom類被點(diǎn)擊的時(shí)候執(zhí)行{}里面的動(dòng)作

$(document).ready(function(){
$('a.scrollToBottom').click(function(){
});
})在這個(gè)函數(shù)中，執(zhí)行這個(gè)代碼
$('html, body').animate({scrollTop: $(document).height()}, 'slow');
return false;當(dāng)一個(gè)鏈接被點(diǎn)擊的代碼將在函數(shù)內(nèi)部運(yùn)行，scrollTop的功能是使用平滑滾動(dòng)效果。上面的代碼將滾動(dòng)到頁面底部，使用窗口的高度，以確定底部高度。使用“slow”，“medium”和“fast”的速度控制，我使用了'slow。
jQuery的滾動(dòng)到頂部
首先，插入一個(gè)鏈接到你的網(wǎng)頁頁腳部分，當(dāng)被點(diǎn)擊的jQuery代碼將執(zhí)行。動(dòng)畫的功能。是非常重要的，因?yàn)樗窃趈Query中引用類的鏈接。
鏈接：
<a href="#" class="scrollToTop">Scroll to bottom</a>jQuery

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('a.scrollToTop').click(function(){ 
$('html, body').animate({scrollTop:0}, 'slow'); 
return false; 
}); 
}) 
</script> 

它是如何工作的：
當(dāng)在頁面加載類。scrollToTop的鏈接被點(diǎn)擊時(shí)的jQuery將執(zhí)行此
$('html, body').animate({scrollTop:0}, 'slow');
return false;.animate()方法使我們能夠創(chuàng)建任何數(shù)字的CSS屬性的動(dòng)畫效果，scrollTop的功能設(shè)置為0，這代表了滾動(dòng)條在最上方的位置，“slow”是指動(dòng)畫將運(yùn)行的速度，在你會(huì)注意到這一行：
<code>return false;</code>這可以防止的默認(rèn)動(dòng)作被觸發(fā)的事件，在我們的例子中，它可以防止用戶鏈接。
也可以這樣：

復(fù)制代碼代碼如下:

event.preventDefault();

您可能感興趣的文章: