資料結構
網路
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 次瀏覽
廣告