Веб-дизайн

Как сделать плавную прокрутку сайта кнопкой пробел?

Доброго здравия!
Видил на каком-то сайте (к сожалению не запомнил на каком, давно было) очень классную фишку, при прокрутке страниц сайта пробелом, сайт плавно прокручивается, замедляясь в конце, а не делает это рывками как это происходит по умолчанию в браузерах.
Это очень приятно для глаз, т.к. у человека в голове выстраивается целостная картина текста, связь одной части с другой.
Каким скриптом или плагином это можно сделать?
Так:
    
// Get the height of the viewport
const viewportHeight = window.innerHeight;
// Set the scroll speed
const scrollSpeed = 20;
// Listen for the spacebar keydown event
document.addEventListener('keydown', function(event) {
if (event.code === 'Space') {
// Prevent the default behavior of the spacebar
event.preventDefault();
// Calculate the distance to scroll
const distanceToScroll = viewportHeight - window.pageYOffset;
// Calculate the duration of the scroll animation
const duration = distanceToScroll / scrollSpeed;
// Animate the scroll
animateScroll(distanceToScroll, duration);
}
});
// Animate the scroll
function animateScroll(distanceToScroll, duration) {
let start = window.pageYOffset;
let currentTime = 0;
// Use requestAnimationFrame to animate the scroll
function animate() {
currentTime += 1 / 60;
const ease = Math.sin(currentTime / duration * (Math.PI / 2));
const newPosition = start + distanceToScroll * ease;
window.scrollTo(0, newPosition);
if (currentTime < duration) {
requestAnimationFrame(animate);
}
}
animate();
}
ВГ
Вечеслав Горбатовський
85 296
Лучший ответ
Илья Цельмер Огромная благодарность! А это в какую часть сайта лучше прикручивать? В какую секцию?
Не знаю готовых скриптов. Однако наверняка скажу, что это легко реализовать, нужно обнулить стандартное действие пробела и после этого написать пару рекурсивных функций на базе requestAnimationFrame, который будет на разных позициях скроллинга прибавлять разное значение скорости, что позволит замедлить скролл ближе к концу.
Ivan Ekkert
Ivan Ekkert
85 909
тя обманули, чювак... ниче ни у кого в голове от прокруток не "выстраивается"
Город Диванов
Город Диванов
47 644
<style>body { scroll-behavior: smooth;}</style>
<a href="#footer">Ссылка, при клике прокручивает до блок с id footer, которыц находится внизу страницы, блок может быть любым, ссылка может быть прозрачной, пустой</a>

Js:
const scrollLink = document.querySelector('.scrollLink');
window.addEventListener('keydown',(e) => {
if (e.code === 'Space') scrollLink.click ()
Вова Прокусов
Вова Прокусов
6 773