CSS JS

SMOOTH SCROLL WITH CSS & JS

(quick guide & examples)

JUST ADD SMOOTH SCROLL BEHAVIOR <style> html { scroll-behavior: smooth; } </style>

CSS SMOOTH SCROLL

01

SCROLL TO TOP <p id="top">Top of page</p> <p style="height: 1500px"></p> <a href="#top">Scroll to top</a>

SCROLL TO EXACT PAGE LOCATION window.scroll({   top: X, left: Y,   behavior: "smooth" });

JS SMOOTH SCROLL

02

SCROLL FROM CURRENT POSITION window.scrollBy({   top: X, left: Y,   behavior: "smooth" });

SCROLL TO HTML ELEMENT document.querySelector("#ID") .scrollIntoView({ behavior: "smooth" });