Smooth Scroll on Click Nav button too Section {5000ms}
Fri Jun 27 2025 23:55:09 GMT+0000 (Coordinated Universal Time)
Saved by
@riyadhbin
document.addEventListener("DOMContentLoaded", function () {
const easeInOutQuad = function (t) {
return t < 0.5 ? 2 * t * t
: -1 + (4 - 2 * t) * t;
};
function smoothScrollTo(targetEl, duration = 500, offset = 80) {
const startY = window.pageYOffset;
const targetY = targetEl.getBoundingClientRect().top + startY - offset;
const diff = targetY - startY;
let startTime;
function scrollStep(timestamp) {
if (!startTime) startTime = timestamp;
const time = timestamp - startTime;
const percent = Math.min(time / duration, 1);
window.scrollTo(0, startY + diff * easeInOutQuad(percent));
if (time < duration) {
window.requestAnimationFrame(scrollStep);
}
}
window.requestAnimationFrame(scrollStep);
}
document.querySelectorAll('a[href^="#"]').forEach(link => {
link.addEventListener("click", function (e) {
const hash = this.getAttribute("href");
const target = document.querySelector(hash);
if (target) {
e.preventDefault();
smoothScrollTo(target, 5000, 80); // 500ms duration, 80px offset
}
});
});
});
content_copyCOPY
Comments