jQuery是一種廣泛應用于網頁開發的JavaScript代碼庫，其中一個很有用的功能便是浮動按鈕。浮動按鈕是一種可以隨著網頁滾動而移動的按鈕，通常用于提醒用戶采取某些行動。下面我們介紹如何利用jQuery創建浮動按鈕。

$(window).scroll(function() {
if($(this).scrollTop() >100) {
$('.floating-btn').addClass('show');
} else {
$('.floating-btn').removeClass('show');
}
});

以上代碼中，我們利用了jQuery的scroll()方法來捕捉網頁滾動事件。當滾動位置scrollTop大于100時，我們添加了一個名為“show”的類名到浮動按鈕上，使其顯示出來。反之，我們從浮動按鈕中刪除該類名，將其隱藏。

接下來，我們需要使用CSS來添加樣式到浮動按鈕：

.floating-btn {
position: fixed;
bottom: 50px;
right: 50px;
background-color: #333;
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
line-height: 50px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease-in-out;
}
.floating-btn.show {
transform: translateX(0);
}
.floating-btn:hover {
background-color: #555;
}

以上是浮動按鈕的樣式代碼。我們使用了position: fixed來將按鈕固定在頁面上。同時定義了位置、背景色、寬高、邊框圓角等樣式。我們還添加了一個陰影效果以及CSS過渡動畫效果。當按鈕添加了“show”類名時，我們使用CSS的transform屬性在x軸上移動按鈕。最后，我們添加了一個鼠標懸停樣式來增加交互性。

至此，我們就完成了創建浮動按鈕的步驟。使用jQuery和CSS可以輕松地實現這一功能，為用戶提供更加方便的體驗。