一、基本介绍
CSS Top Button是一种常见的网页滚动条按钮，可以帮助用户在网页中随意上下滑动，提升用户的使用体验。这个按钮固定在页面的右下角，当用户向下滑动页面时，它将自动出现，当用户点击它时，它将帮助用户快速返回到页面的顶部。本文将介绍如何通过CSS和JavaScript来创建这个功能。
二、CSS实现
首先，我们需要创建一个HTML结构：一个带有id的，以及一些按钮图标。最常见的图标是一个箭头，指向页面顶部。
<div id="topButton">
<img src="top.png" alt="top button">
</div>
这里我们使用id=”topButton”将与CSS和JavaScript脚本连接起来。
接下来，我们使用CSS将按钮样式设置为固定在页面的右下角，当页面高度大于按钮高度时才显示：
#topButton {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
}
#topButton img {
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
background-color: #e5e5e5;
transition: all 0.3s ease-in-out;
}
#topButton:hover img {
transform: scale(1.2);
}
首先，我们将#topButton的display设置为none，使按钮最开始不可见。接下来，我们使用CSS position属性将按钮固定在页面的右下角。使用z-index属性将按钮放在其他元素的上方。最后，我们将所有按钮图标的CSS样式设置为居中、有圆角，且在悬停时变大。
三、JavaScript实现
现在，我们使用JavaScript来编写逻辑，控制按钮的显示和隐藏。
var topButton = document.getElementById("topButton");
window.onscroll = function() {
scrollFunction();
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
topButton.style.display = "block";
} else {
topButton.style.display = "none";
}
}
topButton.onclick = function() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
在这个JavaScript代码中，我们首先获取id=”topButton”的元素。然后，当窗口滚动时，会触发onscroll事件，并调用scrollFunction()函数。scrollFunction()函数检查页面滚动的距离是否大于20像素，如果距离足够，就将按钮显示出来，否则隐藏它。
当用户点击按钮时，按钮将帮助用户快速返回到页面的顶部。我们使用JavaScript来达成这个功能。当按钮被点击时，我们将document.body.scrollTop和document.documentElement.scrollTop设置为零。
四、结论
通过CSS和JavaScript，我们可以创建一个简单的、美观的CSS Top Button，提升用户体验。希望这篇文章能够帮助你更好地学习CSS和JavaScript，如有疑问或者建议，欢迎留言。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/292683.html
微信扫一扫 
支付宝扫一扫 