html怎么设置按钮返回顶部

luo24243482242023-09-24 8:34

在 HTML 中，我们可以通过一些代码和 CSS 样式来创建一个这样的按钮。

<button onclick="topFunction()" id="myBtn">返回顶部</button>
<style>
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
}
#myBtn:hover {
background-color: #555;
}
</style>

以上是一个最基本的返回顶部按钮的 HTML 代码，我们可以通过查看每个元素的样式来更改样式，这里只做简单的解释。

首先，我们创建了一个按钮，并通过 onclick 事件指定了一个 JavaScript 函数来控制页面返回顶部。在 CSS 样式中，我们设置了 ID 为 myBtn 的按钮固定在屏幕上的底部右侧，其 Z 轴索引是 99，我们除去了边框和轮廓，并设置了背景色、颜色、悬停颜色等样式。

此外，我们还设置了 display:none，使其一开始隐藏，只有在页面下滑超过一定距离时才会变得可见。我们可以用 JavaScript 控制，随着页面滚动，按钮是否应该出现或消失。

<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>

这样就好了，看看效果吧！

演示地址：醉学网-让您提分更轻松！ (nongpin88.com)http://www.nongpin88.com/