CSS返回首頁懸浮按鈕是Web界面設(shè)計中常見的元素，它提供了便捷的讓用戶回到網(wǎng)站首頁的方式。本文將介紹如何使用CSS創(chuàng)建一個簡單的懸浮按鈕。

/* CSS代碼開始 */
#back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
display: none;
}
#back-to-top:hover {
cursor: pointer;
}
#back-to-top i {
display: block;
background: url("back-to-top.png") no-repeat;
width: 40px;
height: 40px;
text-indent: -9999px;
}
/* CSS代碼結(jié)束 */

以上代碼定義了一個名為"back-to-top"的DIV元素，將其定位于屏幕右下角，并設(shè)置了一個背景圖像，該圖像代表返回頂部的箭頭。該元素上的懸停效果鼠標(biāo)變?yōu)槭种福崾居脩粼撛乜杀稽c擊。

使用jQuery實現(xiàn)返回頂部按鈕的滾動效果：

/* jQuery代碼開始 */
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() >100) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').click(function() {
$('body,html').animate({scrollTop:0},800);
return false;
});
});
/* jQuery代碼結(jié)束 */

以上代碼將為返回首頁按鈕添加了回到頁面頂部的效果。如果頁面向下滾動超過100像素，按鈕將自動出現(xiàn)。當(dāng)用戶點擊這個按鈕，頁面將平滑地滾動回到頁面頂部。