установка проста. в нижнею часть сайта данный код и все.
Код
<!-- Кнопка "Наверх" -->
<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>