當我們瀏覽一個較長網頁時，返回頂部按鈕的存在變得尤為重要。jQuery 可以輕松地創建返回頂部按鈕以及滑動效果，下面將介紹如何實現。

首先在 HTML 中添加一個返回頂部按鈕，如下所示：

<button id="back-to-top">返回頂部</button>

然后在 CSS 中添加樣式：

#back-to-top {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
font-size: 20px;
border: none;
outline: none;
background-color: #333;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 50%;
}

通過以上樣式，我們將按鈕固定在了頁面的右下角，并且添加了鼠標懸停樣式，并設置了 z-index 避免被其他元素覆蓋。

接下來使用 jQuery 監聽窗口滾動，顯示/隱藏返回頂部按鈕，并添加滑動效果，代碼如下所示：

$(window).scroll(function() {
if ($(this).scrollTop() >= 100) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 800);
});

代碼中，我們使用$(window).scroll()監聽窗口滾動事件，判斷頁面滾動超過 100px 后顯示返回頂部按鈕，否則隱藏按鈕。而當點擊按鈕時，使用$('html, body').animate()添加了一個滑動效果讓頁面平滑滾動到頂部。

最后，我們需要添加在頁面底部的 jQuery 庫和代碼，如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// 上文代碼
</script>

以上即為使用 jQuery 構建返回頂部按鈕并添加滑動效果的方法。希望對大家有所幫助。