jQuery創建平滑的頁面滾動(頂部或底部)
2024-05-06 14:19:34
供稿：網友
在這篇文章中，我將通過本教程向您展示了如何創建一個平滑的滾動效果，使用jQuery。讓您可以滾動到你的網頁的頂部或底部
它是如何工作的
首先，加載jquery庫在</ head>標簽結束前：
代碼如下:
<script type="text/javascript" src="http://demo.Vevb.com/jslib/jquery/jquery1.3.2.js"></script>jQuery滾動到底部：
鏈接：
<a href="#" class="scrollToBottom">Scroll to bottom</a>jQuery
代碼如下:
<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>
它是如何工作的：
第一行代碼在頁面加載之前執行
$(document).ready(function(){當連接的.scrollToBottom類被點擊的時候執行{}里面的動作
$(document).ready(function(){
$('a.scrollToBottom').click(function(){
});
})在這個函數中，執行這個代碼
$('html, body').animate({scrollTop: $(document).height()}, 'slow');
return false;當一個鏈接被點擊的代碼將在函數內部運行，scrollTop的功能是使用平滑滾動效果。上面的代碼將滾動到頁面底部，使用窗口的高度，以確定底部高度。使用“slow”，“medium”和“fast”的速度控制，我使用了'slow。
jQuery的滾動到頂部
首先，插入一個鏈接到你的網頁頁腳部分，當被點擊的jQuery代碼將執行。動畫的功能。是非常重要的，因為它是在jQuery中引用類的鏈接。
鏈接：
<a href="#" class="scrollToTop">Scroll to bottom</a>jQuery
代碼如下:
<script type="text/javascript">
$(document).ready(function(){
$('a.scrollToTop').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
})
</script>
它是如何工作的：
當在頁面加載類。scrollToTop的鏈接被點擊時的jQuery將執行此
$('html, body').animate({scrollTop:0}, 'slow');
return false;.animate()方法使我們能夠創建任何數字的CSS屬性的動畫效果，scrollTop的功能設置為0，這代表了滾動條在最上方的位置，“slow”是指動畫將運行的速度，在你會注意到這一行：
<code>return false;</code>這可以防止的默認動作被觸發的事件，在我們的例子中，它可以防止用戶鏈接。
也可以這樣：
代碼如下:
event.preventDefault();
