Richard Bergsma
d2197984d8
- Adjusted positioning and dimensions of the BackToTop button for better accessibility and user experience. - Increased right margin and button size to enhance visibility and interaction.
116 lines
2.8 KiB
Plaintext
116 lines
2.8 KiB
Plaintext
---
|
|
|
|
---
|
|
|
|
<button id="back-to-top" class="back-to-top" aria-label="Back to top" title="Return to Top">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<polyline points="18 15 12 9 6 15"></polyline>
|
|
</svg>
|
|
</button>
|
|
|
|
<style>
|
|
.back-to-top {
|
|
position: fixed;
|
|
bottom: 80px; /* Increased from 30px to avoid cookie banner */
|
|
right: 16px; /* Increased from 30px for more margin from edge */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 54px;
|
|
height: 54px;
|
|
border-radius: 50%;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
color: #fff;
|
|
border: none;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(10px);
|
|
transition: all 0.3s ease;
|
|
z-index: 90; /* Lower than cookie banner to ensure no conflicts */
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.back-to-top:hover {
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
transform: translateY(-2px) scale(1.05);
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.back-to-top.visible {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Only show on larger screens */
|
|
@media (max-width: 767px) {
|
|
.back-to-top {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Dark mode support */
|
|
:global(.dark) .back-to-top {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
color: #fff;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
:global(.dark) .back-to-top:hover {
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
|
|
}
|
|
</style>
|
|
|
|
<script is:inline>
|
|
// Function to initialize the back to top button
|
|
function initBackToTop() {
|
|
const backToTopButton = document.getElementById('back-to-top');
|
|
|
|
if (!backToTopButton) return;
|
|
|
|
// Show button when scrolling down
|
|
const toggleBackToTopButton = () => {
|
|
if (window.scrollY > 300) {
|
|
backToTopButton.classList.add('visible');
|
|
} else {
|
|
backToTopButton.classList.remove('visible');
|
|
}
|
|
};
|
|
|
|
// Scroll to top with smooth behavior
|
|
const scrollToTop = (e) => {
|
|
e.preventDefault();
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth',
|
|
});
|
|
};
|
|
|
|
// Add event listeners
|
|
window.addEventListener('scroll', toggleBackToTopButton);
|
|
backToTopButton.addEventListener('click', scrollToTop);
|
|
|
|
// Initial check
|
|
toggleBackToTopButton();
|
|
}
|
|
|
|
// Initialize on page load
|
|
initBackToTop();
|
|
|
|
// Re-initialize on view transitions (for Astro's View Transitions)
|
|
document.addEventListener('astro:page-load', initBackToTop);
|
|
document.addEventListener('astro:after-swap', initBackToTop);
|
|
</script>
|