在网页设计中，滚动至顶部按钮是一种常见的用户界面元素，允许用户轻松返回页面的顶部位置。本篇博客将向您展示如何制作一个滚动至顶部按钮，并附上相应的 HTML、CSS 和 JavaScript 代码。
目录
创建 HTML 结构
首先，在 <body> 标签中添加四个具有不同背景颜色的 <div> 元素，作为滚动效果的演示区域。以下是相应的 HTML 代码：
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>添加 CSS 样式
在 <head> 标签中，将以下 CSS 代码添加到 <style> 标签中以定义滚动至顶部按钮的样式以及演示区域的样式。
#scrollToTop {
display: none;
position: fixed;
bottom: 50px;
right: 20px;
width: 50px;
height: 50px;
text-align: center;
border-radius: 50%;
cursor: pointer;
font-size: 30px;
line-height: 50px;
background-color: rosybrown;
transition: background-color 0.3s, transform 0.3s;
}
#scrollToTop img {
width: 50px;
height: 50px;
}
#scrollToTop:hover {
transform: scale(1.1);
}
.box1 {
height: 500px;
width: 500px;
background-color: aqua;
}
.box2 {
height: 500px;
width: 500px;
background-color: fuchsia;
}
.box3 {
height: 500px;
width: 500px;
background-color: yellowgreen;
}
.box4 {
height: 500px;
width: 500px;
background-color: orangered;
}添加 JavaScript 代码
在 <body> 标签的末尾，将以下 JavaScript 代码添加到 <script> 标签中以实现滚动至顶部按钮的显示与隐藏，以及点击按钮后页面滚动至顶部：
window.onscroll = function() {
scrollFunction();
};
function scrollFunction() {
var scrollToTopButton = document.getElementById("scrollToTop");
if (
document.body.scrollTop > 500 ||
document.documentElement.scrollTop > 500
) {
scrollToTopButton.style.display = "block";
} else {
scrollToTopButton.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);
// 您可以调整除数以获得更快或更慢的滚动
}
}结论
随着本篇博客的实施，您已经成功地制作了一个滚动至顶部按钮。您可以通过在滚动页面时观察按钮的显示和隐藏状态，以及点击按钮后页面的滚动行为来验证其功能。
希望这篇博客对您有所帮助，祝您在网页设计中取得更多成功！
如果您有任何其他问题，请随时向我提问。
以下是完整代码：
<!DOCTYPE html>
<html>
<head>
<title>Scroll to Top Button</title>
<style>
#scrollToTop {
display: none;
position: fixed;
bottom: 50px;
right: 20px;
width: 50px;
height: 50px;
text-align: center;
border-radius: 50%;
cursor: pointer;
font-size: 30px;
line-height: 50px;
background-color: rosybrown;
transition: background-color 0.3s, transform 0.3s;
}
#scrollToTop img {
width: 50px;
height: 50px;
}
#scrollToTop:hover {
transform: scale(1.1);
}
.box1 {
height: 500px;
width: 500px;
background-color: aqua;
}
.box2 {
height: 500px;
width: 500px;
background-color: fuchsia;
}
.box3 {
height: 500px;
width: 500px;
background-color: yellowgreen;
}
.box4 {
height: 500px;
width: 500px;
background-color: orangered;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div id="scrollToTop" onclick="scrollToTop()">
<span style="line-height: 50px;">↑</span>
</div>
<script>
window.onscroll = function () {
scrollFunction();
};
function scrollFunction() {
var scrollToTopButton = document.getElementById("scrollToTop");
if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
scrollToTopButton.style.display = "block";
} else {
scrollToTopButton.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); // 您可以调整除数以获得更快或更慢的滚动
}
}
</script>
</body>
</html>
