feat: implement back-to-top button functionality with visibility toggle and smooth scroll behavior
This commit is contained in:
parent
b9371fbdfd
commit
7c8be59f2c
1 changed files with 23 additions and 0 deletions
23
dist/js/app.js
vendored
23
dist/js/app.js
vendored
|
|
@ -2136,6 +2136,28 @@ const UIFeatures = (() => {
|
||||||
window.addEventListener('scroll', throttledUpdate, { passive: true });
|
window.addEventListener('scroll', throttledUpdate, { passive: true });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Back-to-top button behavior
|
||||||
|
const setupBackToTop = () => {
|
||||||
|
const backToTop = document.getElementById('backToTop');
|
||||||
|
if (!backToTop) return;
|
||||||
|
|
||||||
|
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||||
|
|
||||||
|
const updateVisibility = () => {
|
||||||
|
backToTop.classList.toggle('visible', window.pageYOffset > 300);
|
||||||
|
};
|
||||||
|
|
||||||
|
updateVisibility();
|
||||||
|
window.addEventListener('scroll', Utils.throttle(updateVisibility), { passive: true });
|
||||||
|
|
||||||
|
backToTop.addEventListener('click', () => {
|
||||||
|
window.scrollTo({
|
||||||
|
top: 0,
|
||||||
|
behavior: prefersReduced ? 'auto' : 'smooth'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
// Navigation highlight
|
// Navigation highlight
|
||||||
const setupNavHighlight = () => {
|
const setupNavHighlight = () => {
|
||||||
if (!('IntersectionObserver' in window)) return;
|
if (!('IntersectionObserver' in window)) return;
|
||||||
|
|
@ -2202,6 +2224,7 @@ const UIFeatures = (() => {
|
||||||
return Object.freeze({
|
return Object.freeze({
|
||||||
setupScrollAnimations,
|
setupScrollAnimations,
|
||||||
setupHeaderElevation,
|
setupHeaderElevation,
|
||||||
|
setupBackToTop,
|
||||||
setupNavHighlight,
|
setupNavHighlight,
|
||||||
setupURLComparison,
|
setupURLComparison,
|
||||||
setupOfflineDetection
|
setupOfflineDetection
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue