How do I add an animation to scrolling?

HTML-CSS
1

I want to achieve the effect that whenever the user click on the id tag, the page will scroll down to the corresponding section at a slower speed, instead of just jump straight to the section,.

Here is my codepen.

2

In CSS, scroll-behaviour: smooth on the element that scrolls (note won’t work on IE/Edge, and I assume will never be implemented on most mobile browsers, where it doesn’t make sense).

Or in JS, when you click the link, call

yourElement.scrollIntoView({behaviour: 'smooth'})
1 Like