I have the scroll behavior set to smooth in CSS but how to write it in JS?

Question

I've set the scroll functionality to smooth using CSS

scroll-behavior: smooth

I've been told it can be done using scrollIntoView or scrollTo, but I am a bit beginner to this. How do I turn that to pure JS?

Answer 1

scroll-behavior CSS property make the contents within an element scroll smoothly. While Element.scrollIntoView is used to programmatically scroll to an element.

If you want for example scroll to the header of the page with scroll-behavior: smooth you can opt-in the behavior option and set it to smooth .

var header = document.getElementById("header")
header.scrollIntoView({ behavior: "smooth" })