75 lines
No EOL
2.4 KiB
Text
75 lines
No EOL
2.4 KiB
Text
|
|
<button
|
|
id="scroll-top-button"
|
|
class="fixed bottom-8 right-8 z-[100] w-12 h-12 bg-[#bf9b58] text-white rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300 hover:bg-[#a68545] hover:cursor-pointer group"
|
|
aria-label="Вернуться наверх"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-6 h-6 transition-transform duration-300 group-hover:-translate-y-1"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
|
|
</svg>
|
|
</button>
|
|
|
|
<style>
|
|
#scroll-top-button.show {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Функция для обработки прокрутки
|
|
const handleScroll = () => {
|
|
const scrollTopButton = document.getElementById('scroll-top-button');
|
|
|
|
if (!scrollTopButton) return;
|
|
|
|
// Показываем кнопку, если прокрутили больше 20% высоты viewport
|
|
const scrollPercentage = window.scrollY / window.innerHeight;
|
|
|
|
if (scrollPercentage > 0.2) {
|
|
scrollTopButton.classList.add('show');
|
|
} else {
|
|
scrollTopButton.classList.remove('show');
|
|
}
|
|
};
|
|
|
|
// Функция для прокрутки наверх
|
|
const scrollToTop = () => {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
};
|
|
|
|
// Добавляем обработчики событий
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const button = document.getElementById('scroll-top-button');
|
|
if (button) {
|
|
button.addEventListener('click', scrollToTop);
|
|
}
|
|
|
|
window.addEventListener('scroll', handleScroll);
|
|
});
|
|
|
|
// Убираем обработчики при изменении страницы в Astro
|
|
document.addEventListener('astro:before-swap', () => {
|
|
window.removeEventListener('scroll', handleScroll);
|
|
});
|
|
|
|
document.addEventListener('astro:after-swap', () => {
|
|
const button = document.getElementById('scroll-top-button');
|
|
if (button) {
|
|
button.addEventListener('click', scrollToTop);
|
|
}
|
|
|
|
window.addEventListener('scroll', handleScroll);
|
|
});
|
|
</script> |