CSS點擊跳轉到上面是一種常見的網頁設計技巧,它可以讓用戶快速返回網頁頂部,提高用戶體驗。下面是實現該效果的CSS代碼:
/* 點擊返回頂部按鈕的樣式 */ .back-to-top { display: none; position: fixed; bottom: 20px; right: 20px; z-index: 999; font-size: 18px; border: none; outline: none; background-color: #0094FF; color: #fff; cursor: pointer; padding: 10px 20px; border-radius: 50%; } /* 當頁面滾動到指定高度時顯示返回頂部按鈕 */ window.onscroll = function() { scrollFunction(); }; function scrollFunction() { if (document.body.scrollTop >20 || document.documentElement.scrollTop >20) { document.querySelector('.back-to-top').style.display = 'block'; } else { document.querySelector('.back-to-top').style.display = 'none'; } } /* 點擊返回頂部按鈕時平滑滾動到頁面頂部 */ document.querySelector('.back-to-top').addEventListener('click', function() { window.scrollTo({ top: 0, behavior: 'smooth' }); });
以上代碼實現了一個“返回頂部”的按鈕,并且當頁面滾動到一定高度時,該按鈕會自動顯示。點擊按鈕后,頁面將平滑滾動到頂部。