CSS樣式點擊返回頂部是一種非常實用的功能。當用戶上下滾動網頁時,如果頁面很長,他們可能會在底部迷失方向。在這種情況下,將一個返回頂部按鈕添加到頁面的底部或其他方便的位置是非常有幫助的。
要實現此功能,首先需要添加一個固定位置的按鈕。然后使用 CSS 樣式給這個按鈕添加樣式,使其在頁面滾動時始終保持一定位置。最后,給這個按鈕添加 JavaScript 代碼,使得當用戶點擊它時,網頁會自動滾動回頂部。
/* 給返回頂部按鈕添加樣式 */ .back-to-top { position: fixed; bottom: 20px; /* 按鈕與頁面底部的距離 */ right: 20px; /* 按鈕與頁面右側的距離 */ display: none; /* 默認狀態下隱藏按鈕 */ } /* 鼠標懸停時按鈕變暗 */ .back-to-top:hover { opacity: 0.8; } /* 當頁面滾動超過 100 像素時顯示按鈕 */ @media screen and (min-height: 100px) { .back-to-top { display: block; } } /* 給按鈕添加JavaScript代碼,點擊即返回頁面頂部 */ $(function() { $(".back-to-top").click(function() { $("html, body").animate({ scrollTop: 0 }, "slow"); return false; }); });
總之,通過添加 CSS 樣式和 JavaScript 代碼,我們可以輕松地添加返回頂部按鈕,進一步提高網站的用戶體驗。
上一篇css樣式快捷鍵
下一篇php 5分鐘是多少秒