Smooth scrolling is a modern micro-animation feature that enhances user experience by allowing easy navigation between sections of a page. Instead of jumping to sections instantly, smooth scrolling creates a fluid, engaging transition. It's an awesome way to keep users engaged without overwhelming them with abrupt jumps.
In this article, we'll explore two ways to implement smooth scrolling:
- Using CSS
- Using JavaScript
Let's first dive into using CSS for smooth scrolling.
Why CSS for Smooth Scrolling?
CSS is the simplest and most preferred method to achieve smooth scrolling. It's efficient for page performance since no extra JavaScript is loaded, making it faster and lighter. Let's go ahead and implement this in our project.
Step 1: Creating the Navigation Bar
First, let's create a simple navigation bar that holds our navigation links. These links will take users to specific sections on the page.
Make sure the navigation links are anchor tags, as they allow us to easily jump to specific sections of the page.
Step 2: Creating Sections
Now that we have our navigation links, let's create the corresponding sections.
We've created sections for each nav link.
Step 3: Adding Scrollable Content
For smooth scrolling to work, your page needs enough content to scroll. Let’s add some dummy text to make the page scrollable.
Finally we have enough content to make our page scrollable.
Step 4: Linking Navigation to Sections
We’ll use the href attribute of the anchor tag to reference the sections we want to scroll to. Simply add a # followed by the corresponding section ID.
So what we are basically doing from the image above is using the href attribute to reference the section we want our nav links to go to.
Step 5: Assign the appropriate identifier(id) to the appropriate section
So what we have done now is simply assigning each link to it's appropriate section with the href attribute and Ids. Therefore nav link with a href of #section-one would be matched with a section of id section-one
Now when we click on the nav link we are taken to the section.
But there is a something we noticed, it is not smooth, the page jumps to the section which is not a great experience.
Step 6: Adding Smooth Scroll with CSS
To enable smooth scrolling, add a single CSS property to the html element.
When we add the scroll-behavior property to our html, we can witness the smooth scrolling effect when our nav link is clicked.
How It Works
Under the hood, the href attribute in the anchor tag is traditionally used for navigation to external pages or URLs. However, when paired with a # followed by a section ID, the anchor tag "looks" within the current page and scrolls to the corresponding section. By adding the scroll-behavior: smooth; CSS property, we create a fluid transition between sections, enhancing the overall user experience.
The other way we can achieve smooth scrolling is using JAVASCRIPT to handle it.
We can also achieve this in just a few steps:
NB: Each section would still have the assigned id like before.
Step 1: Create a scrollIntoView function
We can create a function in javascript that would use the scrollIntoView method to achieve the same result. Like so:
Step 2: Embed function when link is clicked
we will embed the scrollIntoView function within the event listener attached to each navigation link. This way, when a link is clicked, the page smoothly scrolls to the referenced section.
This can also be refactored depending on the framework you are using for development.
This are two simple ways we can achieve smooth scrolling when building Intuitive webpages.
Leave a comment if you have a question or a feedback.
Top comments (0)