Smooth Scrolling
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:
scroll-behavior: smooth;
Let's look at the Emoji Presenter again with smooth scrolling:
By setting the scroll behavior to smooth, the user gets a sense of distance and time. If the scroll takes a while, then that lets the user know that the page or element has a lot of content in between the start and end positions of their navigation. In fact, I use smooth scrolling on this website! If you look at the bottom-right corner of your screen, you'll see a button with an arrow pointing up. This lets you jump to the top of the page with smooth scrolling! I'm controlling this navigation through JavaScript instead of CSS:
window.scrollTo({
top: 0,
behavior: 'smooth'
})
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!