установка проста. в нижнею часть сайта данный код и все.
Код
<!-- Кнопка "Наверх" -->
<button type="button" id="scroll-top" aria-label="Вернуться наверх"
style="display: none; position: fixed; bottom: 30px; right: 30px; z-index: 1000; width: 48px; height: 48px; border: none; border-radius: 50%; background-color: #1a1a1a; color: white; cursor: pointer; opacity: 0.7; transition: opacity 0.3s, transform 0.2s; padding: 0; " >
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" style="fill: currentColor;" >
<path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/>
</svg>
</button>
<script>
document.addEventListener('DOMContentLoaded', () => {
const scrollTopBtn = document.getElementById('scroll-top');
const toggleScrollButton = () => {
if (window.scrollY > 100) {
scrollTopBtn.style.display = 'block';
} else {
scrollTopBtn.style.display = 'none';
}
};
const smoothScrollToTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
};
window.addEventListener('scroll', toggleScrollButton);
scrollTopBtn.addEventListener('click', smoothScrollToTop);
toggleScrollButton();
});
</script>
<button type="button" id="scroll-top" aria-label="Вернуться наверх"
style="display: none; position: fixed; bottom: 30px; right: 30px; z-index: 1000; width: 48px; height: 48px; border: none; border-radius: 50%; background-color: #1a1a1a; color: white; cursor: pointer; opacity: 0.7; transition: opacity 0.3s, transform 0.2s; padding: 0; " >
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" style="fill: currentColor;" >
<path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/>
</svg>
</button>
<script>
document.addEventListener('DOMContentLoaded', () => {
const scrollTopBtn = document.getElementById('scroll-top');
const toggleScrollButton = () => {
if (window.scrollY > 100) {
scrollTopBtn.style.display = 'block';
} else {
scrollTopBtn.style.display = 'none';
}
};
const smoothScrollToTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
};
window.addEventListener('scroll', toggleScrollButton);
scrollTopBtn.addEventListener('click', smoothScrollToTop);
toggleScrollButton();
});
</script>

0 комментариев
Присоединиться к обсуждению
Поделитесь мнением об этом материале — комментарий появится в списке слева сразу после отправки.