Шпаргалка для WEB мастера: Кнопка наверх + демо - скрипт
Простая кнопка Наверх, появляется при прокрутке немного вниз. Сделано на простом Html, Js, css - не нужно подключать никаких библиотек.
Вот это вставлять в HTML
<!-- КНОПКА НАВЕРХ НАЧАЛО HTML -->
<a href="#" id="scrollToTop" class="scrollToTop">Наверх</a>
<script>
document.addEventListener("scroll", function() {
var button = document.getElementById("scrollToTop");
if (document.documentElement.scrollTop > 100) {
button.style.display = "block"; // Показываем кнопку
} else {
button.style.display = "none"; // Скрываем кнопку
}
});
function scrollToTop() {
const duration = 500; // Длительность анимации в миллисекундах
const start = window.scrollY;
const startTime = performance.now();
function animateScroll(currentTime) {
const elapsedTime = currentTime - startTime;
const progress = Math.min(elapsedTime / duration, 1); // Нормируем прогресс
// Прокручиваем на основе прогресса
window.scrollTo(0, start * (1 - progress));
if (progress < 1) {
requestAnimationFrame(animateScroll); // Запрашиваем следующий кадр
}
}
requestAnimationFrame(animateScroll); // Начинаем анимацию
}
document.getElementById("scrollToTop").addEventListener("click", function(event) {
event.preventDefault();
scrollToTop();
});
</script>
<!-- КНОПКА НАВЕРХ КОНЕЦ -->
Вот это в CSS
/* scroll up */
#scrollToTop{
width:100px;
height:100px;
opacity:1;
position:fixed;
bottom:22px;
left:20px;
display:none;
text-indent:-9999px;
background: url(https://newseoday.ru/uploads/scrollup.webp) no-repeat left top;
z-index: 9001;
border-radius: 50%;
}
@media only screen and (max-width: 840px) {
#scrollToTop {
width: 100px;
height: 100px;
border-radius: 50%;
bottom: 16px;
left: 2%;
}
}
Демо здесь:
Пак с картинками:
Кнопка Наверх - под номером 1
Больше материалов а моем Телеграме :
Начать дискуссию