数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何利用 CSS 创建“滚动回到顶部”按钮？
在许多网站上，你大概看到过一个 **顶部** 按钮，当你滚动到底部时。这被称为“滚动回到顶部”按钮。
创建一个按钮
首先，创建一个在点击时可到达顶部的按钮 -
<button class="topBtn">Top</button>
为顶部按钮添加样式
将 display 设为 **none** 以隐藏按钮。使用 **position** 属性的 **fixed** 值将作为固定按钮。使用 bottom 属性将按钮向下定位 -
topBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 1;
font-size: 24px;
border: none;
outline: none;
background-color: rgb(90, 23, 129);
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
向下滚动以显示按钮
向下滚动时，会显示按钮，因为自定义函数 scrollBtnShow 被调用 -
var topButton = document.querySelector(".topBtn");
topButton.addEventListener("click", topScroll);
window.onscroll = function() {
scrollBtnShow();
};
function scrollBtnShow() {
if (
document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20
) {
topButton.style.display = "block";
}
else {
topButton.style.display = "none";
}
}
点击按钮滚到上面
向下滚动时按钮可见。点击它并调用另一个自定义函数以到达网页顶部 -
function topScroll() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
示例
以下是用 CSS 创建“滚动回到顶部”按钮的代码 -
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
height: 120vh;
}
div p {
font-size: 32px;
}
.topBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 1;
font-size: 24px;
border: none;
outline: none;
background-color: rgb(90, 23, 129);
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
.topBtn:hover {
background-color: rgb(75, 15, 145);
}
</style>
</head>
<body>
<button class="topBtn">Top</button>
<h1>Scroll to top button example</h1>
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae sit, voluptatem minima quibusdam facere hic eum excepturi ex eius, accusamus cum. Iusto quibusdam quo alias laboriosam, debitis natus vero. Accusantium iusto rerum quisquam enim porro! Animi reiciendis quidem esse veritatis quis excepturi mollitia alias, odio error at temporibus deleniti placeat dignissimos id? Suscipit autem incidunt ad sit soluta natus beatae eveniet eaque id. Atque vitae debitis neque assumenda
incidunt iste ut consequuntur cupiditate inventore, eveniet quo adipisci natus blanditiis illum facilis, eius harum cumque enim pariatur magnam sapiente perspiciatis numquam! Sapiente, molestias quaerat. Numquam laborum explicabo quam sapiente dicta aliquam.</p>
</div>
<script>
var topButton = document.querySelector(".topBtn");
topButton.addEventListener("click", topScroll);
window.onscroll = function() {
scrollBtnShow();
};
function scrollBtnShow() {
if (
document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20
) {
topButton.style.display = "block";
}
else {
topButton.style.display = "none";
}
}
function topScroll() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>
更新日期：17-11-2023
529 次浏览
广告