CSS返回頂層功能是網頁設計和開發中常用的一項技術。當頁面滾動到底部時,用戶需要點擊返回頂部按鈕回到頁面頂部。通過CSS代碼,我們可以輕松實現這項功能。
/*返回頂部按鈕樣式*/ .back-to-top { display: none; /*初始狀態隱藏*/ position: fixed; /*固定在瀏覽器右下角*/ bottom: 20px; right: 20px; width: 50px; height: 50px; line-height: 50px; text-align: center; background-color: #333; color: white; border-radius: 50%; cursor: pointer; z-index: 999; /*設置層級,保證按鈕顯示在頁面上方*/ }
以上樣式定義了返回頂部按鈕的基本樣式,包括按鈕的位置、大小、背景色、文本顏色和圓角等。
/*頁面向下滾動時出現返回頂部按鈕*/ window.onscroll = function() { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var backToTopBtn = document.querySelector('.back-to-top'); if (scrollTop >200) { backToTopBtn.style.display = 'block'; } else { backToTopBtn.style.display = 'none'; } } /*點擊返回頂部按鈕時平滑滾動到頁面頂部*/ function scrollToTop() { var currentScroll = document.documentElement.scrollTop || document.body.scrollTop; if (currentScroll >0) { window.requestAnimationFrame(scrollToTop); window.scrollTo(0, currentScroll - (currentScroll / 8)); } } var backToTopBtn = document.querySelector('.back-to-top'); backToTopBtn.onclick = scrollToTop;
以上代碼實現了頁面向下滾動時返回頂部按鈕的出現和隱藏,并在點擊按鈕時平滑地滾動到頁面頂部。這樣,用戶就可以輕松返回頁面頂部,提高用戶體驗。
上一篇圓形進度條百分比css
下一篇圓形字 css