javascript系列
最近遇到舊系統的一個需求，嘗試用javascript寫游標移動特效的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smooth Scroll with Back to Top</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.section {
height: 100vh;
padding: 20px;
border-bottom: 1px solid #ccc;
}
#target-section {
background-color: #f0f8ff;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin-right: 10px;
}
/* 回到頂部按鈕樣式 */
#backToTop {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: #007bff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
cursor: pointer;
display: none; /* 初始隱藏 */
transition: background-color 0.3s;
}
#backToTop:hover {
background-color: #0056b3;
}
/* 箭頭樣式 */
#backToTop::before {
content: "↑";
font-size: 24px;
}
</style>
</head>
<body>
<div class="section">
<button id="scrollButton">Scroll to Target Section</button>
</div>
<div class="section"></div>
<div id="target-section" class="section">
<h2>This is the Target Section</h2>
</div>
<div class="section"></div>
<!-- 回到頂部按鈕 -->
<div id="backToTop"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const scrollButton = document.getElementById("scrollButton");
const backToTopButton = document.getElementById("backToTop");
const targetSection = document.getElementById("target-section");
const offset = 50; // 滾動目標區塊時的偏移量
// 滾動到目標區塊
scrollButton.addEventListener("click", function() {
const targetPosition = targetSection.getBoundingClientRect().top + window.scrollY - offset;
window.scrollTo({
top: targetPosition,
behavior: "smooth"
});
});
// 滾動到頂部
backToTopButton.addEventListener("click", function() {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
// 顯示或隱藏「回到頂部」按鈕
window.addEventListener("scroll", function() {
if (window.scrollY > 200) {
backToTopButton.style.display = "flex";
} else {
backToTopButton.style.display = "none";
}
});
});
</script>
</body>
</html>CSS 樣式
.section：設定每個區塊的高度和內邊距，並增加底部邊框來分隔區塊。方便使用者明顯地看到各個區塊的分界。
#backToTop：
- 位置、大小、形狀：設置
position: fixed固定在視窗右下角，並設置寬高為50px和圓形邊框，讓它以圓形按鈕的形式出現。 - 背景顏色：設置背景顏色為藍色（
#007bff），白色文字，並在懸停時使用深藍色（#0056b3）以提供互動效果。 - 顯示和隱藏：設定
display: none隱藏按鈕，當頁面滾動到一定距離時，透過 JavaScript 控制將其顯示為display: flex。 - 箭頭圖標：使用
::before偽元素設置內容為「↑」符號，並放大字體顯示向上的箭頭。
JavaScript 邏輯
滾動到目標區塊：
scrollButton的click事件：點擊後，獲取target-section元素在頁面中的垂直位置，並使用window.scrollTo平滑滾動到該位置。- 偏移量：設定
offset值為 50，讓滾動位置稍微停留在目標區塊上方，增加可視範圍。
滾動到頂部：
backToTopButton的click事件：點擊該按鈕時，觸發window.scrollTo將頁面平滑滾動到頂部。
顯示或隱藏「回到頂部」按鈕：
- 滾動事件監聽：監聽頁面滾動，當滾動高度超過 200px 時，將
backToTopButton顯示為flex，否則隱藏它。
元哥的筆記