Skip to content

Commit 5cd37a8

Browse files
Swaim-SahaySwaim-Sahay
committed
Added Scroll to Top Button
1 parent 1b7aafc commit 5cd37a8

File tree

3 files changed

+437
-2
lines changed

3 files changed

+437
-2
lines changed

‎aboutus.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,77 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
/* Scroll to Top Button Styles */
8+
.scroll-to-top {
9+
position: fixed;
10+
bottom: 100px;
11+
right: 20px;
12+
width: 60px;
13+
height: 60px;
14+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
15+
color: white;
16+
border: none;
17+
border-radius: 50%;
18+
cursor: pointer;
19+
display: none;
20+
align-items: center;
21+
justify-content: center;
22+
font-size: 1.5em;
23+
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
24+
transition: all 0.3s ease;
25+
z-index: 1000;
26+
animation: pulse 2s infinite;
27+
}
28+
29+
.scroll-to-top:hover {
30+
transform: scale(1.1) translateY(-3px);
31+
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
32+
background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
33+
}
34+
35+
.scroll-to-top:active {
36+
transform: scale(0.95);
37+
}
38+
39+
.scroll-to-top.show {
40+
display: flex;
41+
animation: slideInFromRight 0.5s ease-out;
42+
}
43+
44+
@keyframes slideInFromRight {
45+
from {
46+
opacity: 0;
47+
transform: translateX(100px);
48+
}
49+
to {
50+
opacity: 1;
51+
transform: translateX(0);
52+
}
53+
}
54+
55+
@keyframes pulse {
56+
0%, 100% {
57+
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
58+
}
59+
50% {
60+
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.5);
61+
}
62+
}
63+
64+
/* Responsive adjustments for scroll to top button */
65+
@media (max-width: 768px) {
66+
.scroll-to-top {
67+
bottom: 120px;
68+
right: 15px;
69+
width: 50px;
70+
height: 50px;
71+
font-size: 1.2em;
72+
}
73+
}
74+
75+
/* Footer inside container */
76+
footer {ial-scale=1.0">
677
<link rel="icon" href="NeoRide.jpeg">
778
<title>About NeoRide</title>
879
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">

‎faq.html‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,74 @@
140140
transform: rotate(180deg);
141141
}
142142

143+
/* Scroll to Top Button Styles */
144+
.scroll-to-top {
145+
position: fixed;
146+
bottom: 100px;
147+
right: 20px;
148+
width: 60px;
149+
height: 60px;
150+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
151+
color: white;
152+
border: none;
153+
border-radius: 50%;
154+
cursor: pointer;
155+
display: none;
156+
align-items: center;
157+
justify-content: center;
158+
font-size: 1.5em;
159+
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
160+
transition: all 0.3s ease;
161+
z-index: 1000;
162+
animation: pulse 2s infinite;
163+
}
164+
165+
.scroll-to-top:hover {
166+
transform: scale(1.1) translateY(-3px);
167+
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
168+
background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
169+
}
170+
171+
.scroll-to-top:active {
172+
transform: scale(0.95);
173+
}
174+
175+
.scroll-to-top.show {
176+
display: flex;
177+
animation: slideInFromRight 0.5s ease-out;
178+
}
179+
180+
@keyframes slideInFromRight {
181+
from {
182+
opacity: 0;
183+
transform: translateX(100px);
184+
}
185+
to {
186+
opacity: 1;
187+
transform: translateX(0);
188+
}
189+
}
190+
191+
@keyframes pulse {
192+
0%, 100% {
193+
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
194+
}
195+
50% {
196+
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.5);
197+
}
198+
}
199+
200+
/* Responsive adjustments for scroll to top button */
201+
@media (max-width: 768px) {
202+
.scroll-to-top {
203+
bottom: 120px;
204+
right: 15px;
205+
width: 50px;
206+
height: 50px;
207+
font-size: 1.2em;
208+
}
209+
}
210+
143211
/* Footer */
144212
footer {
145213
background: linear-gradient(135deg, #3b56d0 0%, #630eb7 100%);
@@ -228,6 +296,11 @@ <h1>FAQ</h1>
228296
</div>
229297
</div>
230298

299+
<!-- Scroll to Top Button -->
300+
<button id="scrollToTopBtn" class="scroll-to-top" onclick="scrollToTop()" title="Go to top">
301+
<i class="fas fa-chevron-up"></i>
302+
</button>
303+
231304
<footer>
232305
<div class="footer-content">
233306
<p>&copy; 2025 NeoRide - Your Safety First</p>
@@ -249,6 +322,34 @@ <h1>FAQ</h1>
249322
faq.classList.toggle("active");
250323
});
251324
});
325+
326+
// Scroll to Top Button functionality
327+
const scrollToTopBtn = document.getElementById('scrollToTopBtn');
328+
329+
// Show/hide button based on scroll position
330+
window.addEventListener('scroll', function() {
331+
if (window.pageYOffset > 300) { // Show button after scrolling 300px
332+
scrollToTopBtn.classList.add('show');
333+
} else {
334+
scrollToTopBtn.classList.remove('show');
335+
}
336+
});
337+
338+
// Smooth scroll to top function
339+
function scrollToTop() {
340+
window.scrollTo({
341+
top: 0,
342+
behavior: 'smooth'
343+
});
344+
}
345+
346+
// Add keyboard accessibility for scroll to top button
347+
scrollToTopBtn.addEventListener('keydown', function(e) {
348+
if (e.key === 'Enter' || e.key === ' ') {
349+
e.preventDefault();
350+
scrollToTop();
351+
}
352+
});
252353
</script>
253354

254355
</body>

0 commit comments

Comments
 (0)