Criar um scroll suave html
Estou tentando criar um scroll suave mais por algum motivo não esta indo
Quem puder ajudar eu agradeço
MENU
<div class="navigation">
<nav class="menu">
<div class="logo">
<span>Gamer Lovers</span>
</div>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="#quem-somos">Quem Somos</a></li>
<li><a href="https://web.whatsapp.com/send?phone=*************"
target="_blank">Contato</a></li>
<li><a href="#">Entrar</a></li>
</ul>
</nav>
</div>
JAVASCRIPT
const menuLinks = document.querySelectorAll('.menu a[href^="#"]');
function getDistanceFromTheTop(element) {
const id = element.getAttribute("href");
return document.querySelector(id).offsetTop;
}
function scrollToSection(event) {
event.preventDefault();
const distanceFromTheTop = getDistanceFromTheTop(event.target) - 90;
smoothScrollTo(0, distanceFromTheTop);
}
menuLinks.forEach((link) => {
link.addEventListener("click", scrollToSection);
});
function smoothScrollTo(endX, endY, duration) {
const startX = window.scrollX || window.pageXOffset;
const startY = window.scrollY || window.pageYOffset;
const distanceX = endX - startX;
const distanceY = endY - startY;
const startTime = new Date().getTime();
duration = typeof duration !== "undefined" ? duration : 400;
const easeInOutQuart = (time, from, distance, duration) => {
if ((time /= duration / 2) < 1)
return (distance / 2) * time * time * time * time + from;
return (-distance / 2) * ((time -= 2) * time * time * time - 2) + from;
};
const timer = setInterval(() => {
const time = new Date().getTime() - startTime;
const newX = easeInOutQuart(time, startX, distanceX, duration);
const newY = easeInOutQuart(time, startY, distanceY, duration);
if (time >= duration) {
clearInterval(timer);
}
window.scroll(newX, newY);
}, 1000 / 60);
}Discussão (0)
Carregando comentários...