CSS 實現屏幕回到頂部是一個常見的需求,在頁面設計中使用得比較多。實現起來也是非常簡單的,可以使用以下代碼來實現:
#back-to-top { display: none; position: fixed; bottom: 20px; right: 20px; z-index: 9999; text-decoration: none; color: #fff; background-color: #333333; font-size: 11px; padding: 10px; border-radius: 50%; } #back-to-top:hover { background-color: #1b1b1b; }
以上代碼將在頁面右下角創建一個回到頁面頂部的按鈕,該按鈕的樣式可以根據自己的需求進行調整。在實現頁面回到頂部的效果時,我們需要使用 JavaScript 來實現,以便我們能夠控制滾動條并將頁面滾動到頂部。
以下是一個使用 JavaScript 和 jQuery 實現頁面回到頂部效果的例子:
$(function() { $(window).scroll(function() { if($(this).scrollTop() >200) { $('#back-to-top').fadeIn(); } else{ $('#back-to-top').fadeOut(); } }); $('#back-to-top').click(function() { $('body,html').animate({scrollTop: 0}, 500); return false; }); });
我們在這里使用了 jQuery,并綁定了兩個事件:scroll 和 click。當瀏覽器的滾動條滾動超過了 200 像素時,我們會看到回到頁面頂部的按鈕出現在頁面中。當點擊按鈕時,我們會調用 animate() 函數,以便我們能夠平滑地將頁面滾回頂部。
這就是我們在頁面中實現回到頂部效果所需的關鍵 CSS 和 JavaScript 代碼。你可以根據自己的需求和頁面樣式進行調整,以實現更加復雜的回到頂部效果。
下一篇css 屏幕的最大高度