Have you ever wondered how to achieve smooth scrolling in WordPress without a plugin? There are a lot of plugins that can get the job done. However, adding unnecessary plugins will do more harm than good. It is better to limit plugins, as it will ensure your site runs as smoothly as possible. Restricting the number of plugins also prevents various security issues.
In this article, I will explain how to achieve smooth scrolling in WordPress to a section of another page or post without a plugin.
What Is Smooth Scrolling?
Before diving into writing the simple code, it is vital to understand what is smooth scrolling. Smooth scrolling is the action that takes the user from one section of the page to another.
For example, assume you have a contact button on the main banner image and a contact form at the bottom. Both the button and the contact form are on the same page. Clicking on the button will slide the page down to where the contact form is. It eliminates the need for the user to scroll down using the mouse wheel.
The benefit of smooth scrolling in WordPress is:
- A beautiful and interactive website
- Less action by the user as they can easily reach the section without having to scroll manually. It is beneficial if you have a long page.
Many confuse this function with the back-to-top scroll button at the bottom of the page. Some even consider the mouse wheel action to be the smooth scrolling effect.
Here are the steps you need to take:
How Do I Setup Smooth Scrolling in WordPress Without Using a Plugin?
Setting up smooth scrolling in WordPress without using a plugin is very easy. You don’t need to have technical experience to pull this off.
Scrolling to a particular section, also known as smooth scrolling, is possible using a couple of simple HTML attributes:
- The anchor tag
- The ID
I know I am talking about HTML, but the concept is the same if applying it to a WordPress blog. You need to add the ID of the section you want to scroll to and the section’s name in the anchor URL.
Don’t worry. I will break it down into steps in the next section.
How to Smooth Scroll to a Section of another Page or Post
How to scroll to a section of another page in WordPress always had me stumped. Especially when it comes to adding the ID to the URL to teleport to another page and smoothly scroll to that section. I’m sure numerous other developers may have faced a similar issue. So, for this reason, I thought it was best to write a comprehensive tutorial on it, explaining it step-by-step.
Here are the steps you need to take:
1. Add the ID attribute
Go to the WordPress page you want to add the ID to. I am using the About page in this example. Open the page and add an ID attribute to the section you want to scroll to. You can do this in two ways, depending on whether you are working with the default WordPress editor or a page builder:
1.) Using the Default WordPress Editor
If you are using the default WordPress editor, select the section and see if there is an ID field. If there is, write the name of the ID in that field. If you can’t find the field, you must access the code directly to write the ID. Click on the “Source Code” tab. You can add an ID attribute in the HTML code.
Here is how you can add the ID to the section:
<div id="about-section"> section content </div>I have written the HTML tag, but it could be something different, like a <section>. So, don’t be confused if you see another HTML tag. The main thing is to add the ID, as shown in the code example above.
This section can contain other attributes, but the ID should be unique.
Save and publish the page.
2.) Using a Page Builder
If using a page builder, select the section and search for a field labeled ID. Write the ID name and save the page.
For example, if using Elementor, click on the section and check the settings. The option to add the ID is probably in the Advanced Settings tab.
So, whatever page builder you have, you need to find where the option to add the ID is available. Search online if you can’t locate it.
2. Add the anchor link
It is time to create a link to the section using the anchor tag. Go to the home page and create a link that will redirect to the section on the About page.
Here is the code you need to add.
<a href="/about-page/#about-section">About</a>Highlight the text and click on the link icon to add the link. Another way you can do it is by switching from the visual editor to the source code. From there, you can add the link manually.
Let me break this code for easy understanding. The “about-page” is the exact URL that will redirect the user to the About page. The “#about-section” is the ID we gave to the section on the About page, as shown in step 1. This is the section where we want to scroll, too.
So, it will work like this. The “about-page” will redirect you to the About page. Once there, it will search for the section containing the ID “about-section” and will scroll to that area.
Once you have added the link, save and publish the page.
3. How to Scroll to a Section of Another Page in WordPress Using a Smooth Scrolling Effect
Using Javascript, we can add the smooth scrolling effect. However, there is no need to overcomplicate things. Using CSS, we will write a one-line code that will give the same result.
Add scroll-behavior: smooth to the element to enable smooth scrolling for the page. After you add this CSS and click the button, it will redirect you to the page and smoothly scroll to the section.
html {
scroll-behavior: smooth;
}In WordPress, there are multiple ways to add CSS. Choose whatever method you like and save your changes.
Conclusion
With these steps, you can now scroll to the section on the other page in WordPress. It doesn’t take a lot of time, nor is this process complicated. Using the same method as described above, you can also add smooth scrolling to a section on the same page. The only difference is the URL will not contain the page link. It will only have the ID of the section you want to scroll to.
If you have any questions, let me know in the comments below.