“回到顶部”(Back to Top)是一种常见的网页设计功能,允许用户通过点击一个按钮快速返回到页面的顶部。这种功能通常用于长页面,以提高用户体验。
以下是一个简单的CSS和JavaScript实现“回到顶部”功能的示例:
<button id="back-to-top" class="back-to-top">回到顶部</button>
.back-to-top {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: #555;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
.back-to-top:hover {
background-color: #777;
}
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("back-to-top").style.display = "block";
} else {
document.getElementById("back-to-top").style.display = "none";
}
}
document.getElementById("back-to-top").addEventListener("click", function() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
});
position
、bottom
和right
属性。通过以上方法,你可以实现一个简单且有效的“回到顶部”功能,提升用户体验。
领取专属 10元无门槛券
手把手带您无忧上云