jQuery建立平滑的頁面滾動(頂部或底部)_jquery

在這篇文章中，我將透過本教學向您展示如何建立一個平滑的滾動效果，使用jQuery。讓您可以滾動到您的網頁的頂部或底部

它是如何工作的
首先，加載jquery庫在 head>標籤結束前：

複製程式碼 程式碼如下:

jQuery捲動到底部：

連結：
Scroll to bottomjQuery

複製程式碼 程式碼如下:

程式碼如下:

程式碼如下:

程式碼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;
});
} )


它是如何運作的
：
第一行程式碼在頁面載入之前執行
$(document).ready (function(){當連接的.scrollToBottom類別被點擊的時候執行{}裡面的動作

$(document).ready(function(){ $('a.scrollToBottom'). click(function(){ }); })在這個函數中，執行這個程式碼$('html, body').animate({scrollTop: $(document).height() }, 'slow'); return false;當一個連結被點擊的程式碼將在函數內部運行，scrollTop的功能是使用平滑滾動效果。確定底部高度。

jQuery的滾動到頂部

首先，插入一個連結到你的網頁頁腳部分，當被點擊的jQuery程式碼將執行。動畫的功能。是非常重要的，因為它是在jQuery中引用類別的連結。
鏈接：
Scroll to bottomjQuery




複製代碼

程式碼如下:

它是如何運作的： 當在頁面載入類別。 scrollToTop的連結被點擊時的jQuery將執行此$('html, body').animate({scrollTop:0}, 'slow');

return false;.animate()方法使我們能夠創造任何數字的CSS屬性的動畫效果，scrollTop的功能設定為0，這代表了捲軸在最上方的位置，「slow」是指動畫將運行的速度，在你會注意到這一行：
return false;這可以防止的預設動作被觸發的事件，在我們的例子中，它可以防止使用者連結。

也可以這樣： 複製程式碼 代碼如下: 代碼如下:event.preventDefault();