Skip to content

updated Back to top/bottom across all pages #734

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Sep 24, 2025
Merged

updated Back to top/bottom across all pages #734

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
78e9df6
Corrected back to top/bottom in about.html
Nikhilrsingh Sep 24, 2025
bf0655c
Corrected back to top/bottom in about.css
Nikhilrsingh Sep 24, 2025
0239702
Corrected back to top/bottom in about.js
Nikhilrsingh Sep 24, 2025
852e2db
Corrected back to top/bottom in convert.html
Nikhilrsingh Sep 24, 2025
f2923f2
Corrected back to top/bottom in customize.html
Nikhilrsingh Sep 24, 2025
ceaa229
Corrected back to top/bottom in faq.html
Nikhilrsingh Sep 24, 2025
1577955
Corrected back to top/bottom in scale.html
Nikhilrsingh Sep 24, 2025
4114ef7
Corrected back to top/bottom in index.html
Nikhilrsingh Sep 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,9 +180,10 @@ <h2 class="section-title">What is BakeGenius.ai?</h2>
</section>
</div>

<!-- Dual Scroll Buttons -->
<button id="scrollTopBtn" class="scroll-btn" title="Back to Top">⬆</button>
<button id="scrollBottomBtn" class="scroll-btn" title="Scroll to Bottom">⬇</button>
<!-- Back to Top Button -->
<button id="backToTop" title="Back to Top">⬆</button>
<!-- Top to Bottom Button -->
<button id="Toptoback" title="Top To Back">⬇</button>

<section class="contributors">
<span class="img">👩‍💻</span>
Expand Down
2 changes: 1 addition & 1 deletion assets/css/about.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2831,7 +2831,7 @@ body.about-page.dark-mode li {

body.dark-mode .copyright .name {
color: #ef6154;
}
}}
/* 📱 Mobile Responsive Tweaks */
@media (max-width: 768px) {
.footer-content {
Expand Down
28 changes: 27 additions & 1 deletion assets/js/about.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,4 +137,30 @@ document.addEventListener("DOMContentLoaded", function () {
hamburger.classList.remove("active");
}
});
});
});

// Back to Top Button Logic
const backToTopBtn = document.getElementById("backToTop");
window.addEventListener("scroll", () => {
if (window.scrollY > 100) {
backToTopBtn.classList.add("show");
} else {
backToTopBtn.classList.remove("show");
}
});
backToTopBtn.addEventListener("click", () => {
window.scrollTo({ top: 0, behavior: "smooth" });
});

//Top to Bottom Button Logic
const ToptobackBtn = document.getElementById("Toptoback");
window.addEventListener("scroll", () => {
if (window.scrollY < 100) {
ToptobackBtn.classList.add("show");
} else {
ToptobackBtn.classList.remove("show");
}
});
ToptobackBtn.addEventListener("click", () => {
window.scrollTo({ top: 10000, behavior: "smooth" });
});
121 changes: 104 additions & 17 deletions convert.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

<!DOCTYPE html>
<html lang="en">
<head>
Expand Down Expand Up @@ -278,15 +277,82 @@
.floating-cupcake:nth-child(4){ bottom:30%; right:10%; animation-delay:1s;}
@keyframes float { 0%,100% { transform:translateY(0) rotate(0deg);} 50% { transform:translateY(-20px) rotate(5deg);} }

/* Back to Top button */
#backToTop {
position: fixed; right: 2.5rem; bottom: 2.5rem; z-index: 2000;
background: linear-gradient(45deg, #a4766a, #5d4037); color: #fff; border: none; border-radius: 50%;
width: 56px; height: 56px; font-size: 2rem; box-shadow: 0 8px 24px rgba(0,0,0,0.18);
cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .4s, transform .2s;
}
#backToTop.show { opacity:1; pointer-events:auto; transform: scale(1.08); }
#backToTop:hover { transform: scale(1.15); }
/* Back to Top Button Styles */
#backToTop {
position: fixed;
bottom: 2.5rem;
right: 2.5rem;
z-index: 2000;
background: linear-gradient(45deg, #a4766a, #5d4037);
color: #fff;
border: none;
border-radius: 50%;
width: 56px;
height: 56px;
font-size: 2rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s, transform 0.2s;
}

body.dark-mode #backToTop {
background: #e0e0e0;
color: #0d0d0d;
}

#backToTop.show {
opacity: 1;
pointer-events: auto;
transform: scale(1.08);
}

#backToTop:hover {
background: linear-gradient(45deg, #a4766a, #5d4037);
transform: scale(1.15);
}

/* Back to Top to Bottom Button Styles */
#Toptoback {
position: fixed;
bottom: 2.5rem;
right: 2.5rem;
z-index: 2000;
background: linear-gradient(45deg, #a4766a, #5d4037);
color: #fff;
border: none;
border-radius: 50%;
width: 56px;
height: 56px;
font-size: 2rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s, transform 0.2s;
}

body.dark-mode #Toptoback {
background: #e0e0e0;
color: #0d0d0d;
}

#Toptoback.show {
opacity: 1;
pointer-events: auto;
transform: translateY(-10px) scale(1.08);
}

#Toptoback:hover {
background: linear-gradient(45deg, #a4766a, #5d4037);
transform: scale(1.15);
}

body.dark-mode #Toptoback:hover {
background: #e0e0e0;
transform: scale(1.15);
}

/* ===== FOOTER ===== */
.footer { background: radial-gradient(circle at center, #e9b4b6, #e5c5b3); backdrop-filter: blur(15px); position:relative; z-index:2; border-top:1px solid rgba(255,255,255,0.3); margin-top:4rem; }
Expand Down Expand Up @@ -424,7 +490,9 @@ <h3 id="warnTitle">⚠️ Ambiguous Measurement</h3>
</div>

<!-- Back to Top Button -->
<button id="backToTop" title="Back to Top" aria-label="Back to top">⬆</button>
<button id="backToTop" title="Back to Top">⬆</button>
<!-- Top to Bottom Button -->
<button id="Toptoback" title="Top To Back">⬇</button>

<!-- FOOTER -->
<footer class="footer">
Expand Down Expand Up @@ -682,12 +750,31 @@ <h3 class="footer-title">Support</h3>
}
window.closeWarning = closeWarning;

// Back to top behavior
const backToTopBtn = document.getElementById('backToTop');
window.addEventListener('scroll', ()=>{
backToTopBtn.classList.toggle('show', window.scrollY > 300);
});
backToTopBtn.addEventListener('click', ()=> window.scrollTo({top:0, behavior:'smooth'}));
// Back to Top Button Logic
const backToTopBtn = document.getElementById("backToTop");
window.addEventListener("scroll", () => {
if (window.scrollY > 100) {
backToTopBtn.classList.add("show");
} else {
backToTopBtn.classList.remove("show");
}
});
backToTopBtn.addEventListener("click", () => {
window.scrollTo({ top: 0, behavior: "smooth" });
});

//Top to Bottom Button Logic
const ToptobackBtn = document.getElementById("Toptoback");
window.addEventListener("scroll", () => {
if (window.scrollY < 100) {
ToptobackBtn.classList.add("show");
} else {
ToptobackBtn.classList.remove("show");
}
});
ToptobackBtn.addEventListener("click", () => {
window.scrollTo({ top: 10000, behavior: "smooth" });
});

// Entry animations
document.addEventListener('DOMContentLoaded', ()=>{
Expand Down
167 changes: 101 additions & 66 deletions customize.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1187,50 +1187,83 @@
justify-content: center;
}
}
/* Dual Scroll Buttons */
.scroll-btn {
position: fixed;
right: 2.5rem;
z-index: 2000;
background: linear-gradient(45deg,#a4766a,#5d4037);
color: #fff;
border: none;
border-radius: 50%;
width: 56px;
height: 56px;
font-size: 2rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s, transform 0.2s;
}

body.dark-mode .scroll-btn {
background: #e0e0e0;
color: #0d0d0d;
}
/* Back to Top Button Styles */
#backToTop {
position: fixed;
bottom: 2.5rem;
right: 2.5rem;
z-index: 2000;
background: linear-gradient(45deg, #a4766a, #5d4037);
color: #fff;
border: none;
border-radius: 50%;
width: 56px;
height: 56px;
font-size: 2rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s, transform 0.2s;
}

.scroll-btn.show {
opacity: 1;
pointer-events: auto;
transform: scale(1.08);
}
body.dark-mode #backToTop {
background: #e0e0e0;
color: #0d0d0d;
}

.scroll-btn:hover {
transform: scale(1.15);
background: linear-gradient(45deg,#5d4037,#a4766a);
}
#backToTop.show {
opacity: 1;
pointer-events: auto;
transform: scale(1.08);
}

body.dark-mode .scroll-btn:hover {
background: #e0e0e0;
color: #0d0d0d;
}
#backToTop:hover {
background: linear-gradient(45deg, #a4766a, #5d4037);
transform: scale(1.15);
}

/* Positioning individually */
#scrollTopBtn { bottom: 6.5rem; } /* Above bottom button */
#scrollBottomBtn { bottom: 2.5rem; }
/* Back to Top to Bottom Button Styles */
#Toptoback {
position: fixed;
bottom: 2.5rem;
right: 2.5rem;
z-index: 2000;
background: linear-gradient(45deg, #a4766a, #5d4037);
color: #fff;
border: none;
border-radius: 50%;
width: 56px;
height: 56px;
font-size: 2rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s, transform 0.2s;
}

body.dark-mode #Toptoback {
background: #e0e0e0;
color: #0d0d0d;
}

#Toptoback.show {
opacity: 1;
pointer-events: auto;
transform: translateY(-10px) scale(1.08);
}

#Toptoback:hover {
background: linear-gradient(45deg, #a4766a, #5d4037);
transform: scale(1.15);
}

body.dark-mode #Toptoback:hover {
background: #e0e0e0;
transform: scale(1.15);
}

/* Success Message */
.success-message {
Expand Down Expand Up @@ -1395,10 +1428,11 @@ <h2 class="brand-title">🏷️ Choose Your Preferred Brand</h2>
</button>
</div>
</div>
<!-- Dual Scroll Buttons -->
<button id="scrollTopBtn" class="scroll-btn" title="Back to Top">⬆</button>
<button id="scrollBottomBtn" class="scroll-btn" title="Scroll to Bottom">⬇</button>

<!-- Back to Top Button -->
<button id="backToTop" title="Back to Top">⬆</button>
<!-- Top to Bottom Button -->
<button id="Toptoback" title="Top To Back">⬇</button>

<!-- footer startes here -->
<footer class="footer">
Expand Down Expand Up @@ -1732,31 +1766,32 @@ <h3 class="footer-title">Support</h3>
}, 10);
}
});
// Dual Scroll Buttons
const scrollTopBtn = document.getElementById('scrollTopBtn');
const scrollBottomBtn = document.getElementById('scrollBottomBtn');

window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
scrollTopBtn.classList.add('show');
} else {
scrollTopBtn.classList.remove('show');
}

if (window.innerHeight + window.scrollY < document.body.offsetHeight - 300) {
scrollBottomBtn.classList.add('show');
} else {
scrollBottomBtn.classList.remove('show');
}
});

scrollTopBtn.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});

scrollBottomBtn.addEventListener('click', () => {
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
});

// Back to Top Button Logic
const backToTopBtn = document.getElementById("backToTop");
window.addEventListener("scroll", () => {
if (window.scrollY > 100) {
backToTopBtn.classList.add("show");
} else {
backToTopBtn.classList.remove("show");
}
});
backToTopBtn.addEventListener("click", () => {
window.scrollTo({ top: 0, behavior: "smooth" });
});

//Top to Bottom Button Logic
const ToptobackBtn = document.getElementById("Toptoback");
window.addEventListener("scroll", () => {
if (window.scrollY < 100) {
ToptobackBtn.classList.add("show");
} else {
ToptobackBtn.classList.remove("show");
}
});
ToptobackBtn.addEventListener("click", () => {
window.scrollTo({ top: 10000, behavior: "smooth" });
});

</script>
</body>
Expand Down
Loading