增強版頁面內導航與動畫效果

Revisione 1fed4017eecb7c3f4d8765079bf165ceb3dbfe27

Raw

<!DOCTYPE html> <html lang="zh-Hant"> <head> <meta charset="UTF-8"> <title>增強版頁面內導航範例</title> <style> body { font-family: Arial, sans-serif; scroll-behavior: smooth; /* 平滑滾動 */ margin: 0; padding: 0; } /* 固定導航欄 */ .navbar { position: fixed; top: 0; width: 100%; background-color: rgba(51, 51, 51, 0.9); padding: 10px 0; text-align: center; z-index: 1000; transition: background-color 0.3s; } .navbar.scrolled { background-color: rgba(51, 51, 51, 1); } .navbar a { color: white; margin: 0 15px; text-decoration: none; font-weight: bold; padding: 8px 16px; border-radius: 4px; transition: background-color 0.3s, color 0.3s; } .navbar a.active, .navbar a:hover { background-color: #fff; color: #333; } /* 內容區塊 */ .section { padding: 100px 20px; margin-top: 60px; /* 避免被固定導航欄遮蓋 */ min-height: 100vh; opacity: 0; transform: translateY(50px); transition: opacity 1s ease-out, transform 1s ease-out; } .section.visible { opacity: 1; transform: translateY(0); } #section1 { background-color: #f4f4f4; } #section2 { background-color: #e4e4e4; } #section3 { background-color: #d4d4d4; } #section4 { background-color: #c4c4c4; } /* 返回頂部按鈕 */ #backToTop { position: fixed; bottom: 40px; right: 40px; background-color: #333; color: #fff; padding: 10px 15px; border: none; border-radius: 50%; cursor: pointer; display: none; /* 初始隱藏 */ font-size: 18px; z-index: 1000; transition: background-color 0.3s; } #backToTop:hover { background-color: #555; } </style> </head> <body>  <div class="navbar" id="navbar"> <a href="#section1" class="nav-link">部分一</a> <a href="#section2" class="nav-link">部分二</a> <a href="#section3" class="nav-link">部分三</a> <a href="#section4" class="nav-link">部分四</a> </div>  <div id="section1" class="section"> <h2>部分一</h2> <p>這是第一部分的內容。你可以在這裡放置任何你想要展示的資訊。</p> </div> <div id="section2" class="section"> <h2>部分二</h2> <p>這是第二部分的內容。繼續添加更多內容，使頁面更豐富。</p> </div> <div id="section3" class="section"> <h2>部分三</h2> <p>這是第三部分的內容。你可以加入圖片、視頻或其他多媒體內容。</p> </div> <div id="section4" class="section"> <h2>部分四</h2> <p>這是第四部分的內容。頁面結束，謝謝你的瀏覽！</p> </div>  <button id="backToTop" title="返回頂部">⇧</button> <script> // 當前視窗滾動位置 const sections = document.querySelectorAll('.section'); const navLinks = document.querySelectorAll('.nav-link'); const navbar = document.getElementById('navbar'); const backToTop = document.getElementById('backToTop'); // 檢查哪些區塊進入視窗，並添加動畫 const observerOptions = { threshold: 0.1 }; const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if(entry.isIntersecting){ entry.target.classList.add('visible'); observer.unobserve(entry.target); } }); }, observerOptions); sections.forEach(section => { observer.observe(section); }); // 高亮當前導航連結 window.addEventListener('scroll', () => { let current = ''; sections.forEach(section => { const sectionTop = section.offsetTop - 70; if (pageYOffset >= sectionTop) { current = section.getAttribute('id'); } }); navLinks.forEach(link => { link.classList.remove('active'); if(link.getAttribute('href') === `#${current}`){ link.classList.add('active'); } }); // 導航欄背景變化 if (window.scrollY > 50) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } // 返回頂部按鈕顯示 if (window.scrollY > 300) { backToTop.style.display = 'block'; } else { backToTop.style.display = 'none'; } }); // 返回頂部按鈕功能 backToTop.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); </script> </body> </html>

1	<!DOCTYPE html>
2	<html lang="zh-Hant">
3	<head>
4	<meta charset="UTF-8">
5	<title>增強版頁面內導航範例</title>
6	<style>
7	body {
8	font-family: Arial, sans-serif;
9	scroll-behavior: smooth; /* 平滑滾動 */
10	margin: 0;
11	padding: 0;
12	}
13
14	/* 固定導航欄 */
15	.navbar {
16	position: fixed;
17	top: 0;
18	width: 100%;
19	background-color: rgba(51, 51, 51, 0.9);
20	padding: 10px 0;
21	text-align: center;
22	z-index: 1000;
23	transition: background-color 0.3s;
24	}
25
26	.navbar.scrolled {
27	background-color: rgba(51, 51, 51, 1);
28	}
29
30	.navbar a {
31	color: white;
32	margin: 0 15px;
33	text-decoration: none;
34	font-weight: bold;
35	padding: 8px 16px;
36	border-radius: 4px;
37	transition: background-color 0.3s, color 0.3s;
38	}
39
40	.navbar a.active, .navbar a:hover {
41	background-color: #fff;
42	color: #333;
43	}
44
45	/* 內容區塊 */
46	.section {
47	padding: 100px 20px;
48	margin-top: 60px; /* 避免被固定導航欄遮蓋 */
49	min-height: 100vh;
50	opacity: 0;
51	transform: translateY(50px);
52	transition: opacity 1s ease-out, transform 1s ease-out;
53	}
54
55	.section.visible {
56	opacity: 1;
57	transform: translateY(0);
58	}
59
60	#section1 { background-color: #f4f4f4; }
61	#section2 { background-color: #e4e4e4; }
62	#section3 { background-color: #d4d4d4; }
63	#section4 { background-color: #c4c4c4; }
64
65	/* 返回頂部按鈕 */
66	#backToTop {
67	position: fixed;
68	bottom: 40px;
69	right: 40px;
70	background-color: #333;
71	color: #fff;
72	padding: 10px 15px;
73	border: none;
74	border-radius: 50%;
75	cursor: pointer;
76	display: none; /* 初始隱藏 */
77	font-size: 18px;
78	z-index: 1000;
79	transition: background-color 0.3s;
80	}
81
82	#backToTop:hover {
83	background-color: #555;
84	}
85	</style>
86	</head>
87	<body>
88
89	<!-- 導航欄 -->
90	<div class="navbar" id="navbar">
91	<a href="#section1" class="nav-link">部分一</a>
92	<a href="#section2" class="nav-link">部分二</a>
93	<a href="#section3" class="nav-link">部分三</a>
94	<a href="#section4" class="nav-link">部分四</a>
95	</div>
96
97	<!-- 內容部分 -->
98	<div id="section1" class="section">
99	<h2>部分一</h2>
100	<p>這是第一部分的內容。你可以在這裡放置任何你想要展示的資訊。</p>
101	</div>
102
103	<div id="section2" class="section">
104	<h2>部分二</h2>
105	<p>這是第二部分的內容。繼續添加更多內容，使頁面更豐富。</p>
106	</div>
107
108	<div id="section3" class="section">
109	<h2>部分三</h2>
110	<p>這是第三部分的內容。你可以加入圖片、視頻或其他多媒體內容。</p>
111	</div>
112
113	<div id="section4" class="section">
114	<h2>部分四</h2>
115	<p>這是第四部分的內容。頁面結束，謝謝你的瀏覽！</p>
116	</div>
117
118	<!-- 返回頂部按鈕 -->
119	<button id="backToTop" title="返回頂部">⇧</button>
120
121	<script>
122	// 當前視窗滾動位置
123	const sections = document.querySelectorAll('.section');
124	const navLinks = document.querySelectorAll('.nav-link');
125	const navbar = document.getElementById('navbar');
126	const backToTop = document.getElementById('backToTop');
127
128	// 檢查哪些區塊進入視窗，並添加動畫
129	const observerOptions = {
130	threshold: 0.1
131	};
132
133	const observer = new IntersectionObserver((entries, observer) => {
134	entries.forEach(entry => {
135	if(entry.isIntersecting){
136	entry.target.classList.add('visible');
137	observer.unobserve(entry.target);
138	}
139	});
140	}, observerOptions);
141
142	sections.forEach(section => {
143	observer.observe(section);
144	});
145
146	// 高亮當前導航連結
147	window.addEventListener('scroll', () => {
148	let current = '';
149	sections.forEach(section => {
150	const sectionTop = section.offsetTop - 70;
151	if (pageYOffset >= sectionTop) {
152	current = section.getAttribute('id');
153	}
154	});
155
156	navLinks.forEach(link => {
157	link.classList.remove('active');
158	if(link.getAttribute('href') === `#${current}`){
159	link.classList.add('active');
160	}
161	});
162
163	// 導航欄背景變化
164	if (window.scrollY > 50) {
165	navbar.classList.add('scrolled');
166	} else {
167	navbar.classList.remove('scrolled');
168	}
169
170	// 返回頂部按鈕顯示
171	if (window.scrollY > 300) {
172	backToTop.style.display = 'block';
173	} else {
174	backToTop.style.display = 'none';
175	}
176	});
177
178	// 返回頂部按鈕功能
179	backToTop.addEventListener('click', () => {
180	window.scrollTo({
181	top: 0,
182	behavior: 'smooth'
183	});
184	});
185	</script>
186	</body>
187	</html>
188