Greetings, friends! Let's talk about smooth scrolling. Sometimes, you may want to navigate the user to a certain part of a page or element when they click a link or button. By default, the scroll-behavior property of scrollable elements is set to auto which means that the scroll position will instantly jump to that section of the page. Let's take a look at an example I created called Emoji Presenter.
When you click on a number, it will navigate through a list of emojis. With the scroll-behavior set to auto, the transition appears to happen instantly. Depending on your use case, this might work for you. For example, if you have a lot of content on the screen, then smooth scrolling might take too long to finish and annoy the user. However, if you don't have much content, then it may be wiser to use smooth-scrolling instead. Set this property on the scrollable element:
Let's look at the Emoji Presenter again with smooth scrolling:
I hope this article went smoothly 😎, and I hope you see the potential of smooth scrolling on your website! Feel free to check out my CodePen to play around with the Emoji Presenter. Happy coding!