How to Add a Smooth Scroll to Top Effect in WordPress Using jQuery

Ever scrolled through a long WordPress blog post or product page on your phone, only to realize you had to swipe all the way back up just to find the menu? Your visitors might feel the same.

On longer pages, that small inconvenience can quickly turn into frustration. And some may simply leave your WordPress site instead of navigating back.

A smooth scroll-to-top button can help you fix this instantly. This feature gives readers a quick way to jump back up, which can keep them engaged and encourage them to explore more of your site.

In this guide, we’ll share exactly how to add a smooth scroll-to-top effect in WordPress using jQuery. Don’t worry, it’s simpler than you might think! 💡

What Is Smooth Scroll, and When Should You Use It?

Smooth scroll is a navigation effect that moves the page up or down in a steady, fluid motion instead of jumping instantly to a section. You should use it when you want to give users a less jarring way to navigate long pages, especially for features like “back to top” buttons.

Unless the site has a sticky header menu, users who scroll to the bottom of a long WordPress post or page have to manually swipe or scroll their way back to the top to navigate the site.

That can be a real annoyance, and often, users will simply hit the back button and leave. That’s why you need a button to quickly send users to the top of the post or page.

Typically, you can add this functionality as a simple text link without using jQuery, like this:

<a href="#" title="Back to top">^Top</a>

That will send users to the top by scrolling up the entire page in milliseconds. It works, but the effect can be jarring, kind of like when you hit a bump in the road.

A smooth scroll is the opposite of that. It will slide the user back to the top with a visually pleasing effect. Using elements like this can drastically improve the user experience on your site.

With that in mind, we’ll share two methods to add a smooth scroll-to-top effect on your WordPress site using a plugin and jQuery. Here’s a quick overview of all the things we’ll cover in this guide:

• Tip 1: Adding a Smooth Scroll-to-Top Effect Using a WordPress Plugin (Easy)
• Tip 2: Adding Smooth Scroll to Top Effect with jQuery in WordPress (Advanced)
• Bonus Tip: Other Subtle Animation Effects to Keep Visitors Engaged
• FAQs: Adding a Scroll-to-Top Effect in WordPress Using jQuery
• Further Reading: More Resources Around WordPress Themes

Without further ado, let’s start with the first method.

Adding a Smooth Scroll-to-Top Effect Using a WordPress Plugin

This method is recommended for beginners since it allows you to add a scroll-to-top effect to a WordPress website without touching a single line of code.

The first thing you’ll need to do is install and activate the WPFront Scroll Top plugin. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, you can go to Settings » Scroll Top from your WordPress dashboard. Here, you can configure the plugin and customize the smooth scroll effect.

From here, the first thing you’ll need to do is click the ‘Enabled’ checkbox to activate the scroll-to-top button on your site. Next, you’ll see options to edit the scroll offset, button size, opacity, fade duration, scroll duration, and more.

If you scroll down, you’ll find more options, such as editing the auto-hide time and enabling the option to hide the button on small devices or the wp-admin screen.

You can also edit what the button does when you click it. By default, it will scroll to the top of the page, but you can change it to scroll to a particular element in the post or even link to a page.

Additionally, you can adjust the button’s location. While it typically appears in the bottom right corner of the screen, you have the option to move it to any other corner.

The WPFront Scroll Top plugin offers filters to show the scroll-to-top button only on selected pages.

Normally, it will appear on all the pages on your WordPress blog.

However, you can navigate to the ‘Display on Pages’ section and choose where you’d like to display the scrolling to the top effect.

The plugin also offers pre-built button designs. You should easily be able to find a design that matches your site.

If you can’t find a pre-built image button that works for you, then there is an option to upload a custom image from the WordPress media library.

When you’re done, simply click the ‘Save Changes’ button.

You can now visit your WordPress website to see the scroll-to-top button in action.

Adding Smooth Scroll to Top Effect with jQuery in WordPress

Before we start, note that this method is not recommended for beginners. It’s suitable for people who are comfortable editing themes because it includes adding code to your website.

To add the smooth scroll-top effect, we will use jQuery, some CSS, and a single line of HTML code in your WordPress theme.

First, let’s open a text editor like Notepad and create a file. Go ahead and save it as smoothscroll.js.

Next, you will need to copy and paste this code into the file:

jQuery(document).ready(function($){
	$(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
			$('#smoothup') .fadeOut();
        } else {
			$('#smoothup') .fadeIn();
        }
    });
	$('#smoothup').on('click', function(){
		$('html, body').animate({scrollTop:0}, 'fast');
		return false;
		});
});

This code is the jQuery script that will add a smooth scroll effect to a button that takes users to the top of the page.

After that, you can save the file and upload it to the /js/ folder in your WordPress theme directory.

For more details, please see our guide on how to use FTP to upload files to WordPress.

If your theme does not have a /js/ directory, then you can create one and upload smoothscroll.js to it.

You can also see our guide on the WordPress files and directory structure for more information.

The next thing you need to do is to load the smoothscroll.js file in your theme.

To do that, we’ll enqueue the script in WordPress by simply copying and pasting this code into your theme’s functions.php file.

However, we don’t recommend directly editing the theme files because the slightest mistake can break your site.

Instead, you can use a plugin like WPCode, the best code snippet plugin for WordPress, and follow our tutorial on adding custom code snippets in WordPress:

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '',  true );

The above code tells WordPress to load our script and the jQuery library since our plugin depends on them.

Now that we have added jQuery, let’s add an actual link to our WordPress site that takes users back to the top.

To do this, simply paste this HTML anywhere in your theme’s footer.php file using WPCode.

<a href="#top" id="smoothup" title="Back to top"></a>

If you need help, please see our tutorial on how to add header and footer code in WordPress

You may have noticed that the HTML code includes a link but no anchor text. That’s because we will use an image icon with an up arrow to display a back-to-top button.

In this example, we are using a 40x40px icon. Simply add the custom CSS below to your theme’s stylesheet.

In this code, we are using an image icon as the button’s background image and setting it in a fixed position. We have also added a little CSS animation, which rotates the button when a user hovers their mouse over it:

#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s; transition-duration: 0.4s;
}

#smoothup:hover {
-webkit-transform: rotate(360deg) }
background: url('') no-repeat;
}

In the CSS above, make sure that you replace https://www.example.com/wp-content/uploads/2013/07/top_icon.png with the image URL you want to use.

You can upload your own image icon using the WordPress media uploader, copy the image URL, and then paste it into the code.

And that’s basically it!

Bonus Tip: Other Subtle Animation Effects to Keep Visitors Engaged

A smooth scroll-to-top button is just one way to make your site feel more user-friendly. There are plenty of other small animation effects you can add to gently guide attention and make browsing your site feel effortless.

For example, a parallax effect makes background images move at a different speed than your content, creating a sense of depth and movement.

It’s a simple way to make your pages feel more alive. For step-by-step instructions, see our guide on how to add a parallax effect.

A search toggle effect keeps things clean by showing the search bar only when someone clicks the icon. This helps your design feel less cluttered while still making it easy for visitors to find what they need.

If your theme doesn’t already have this built in, plugins like WPCode can help. For details, check out our guide on how to add a search toggle effect in WordPress.

And if you have an image gallery, a lightbox effect lets people view photos in a larger, distraction-free pop-up without leaving the page. It’s a small detail, but it makes a big difference for anyone who loves to explore your visuals.

Plus, gallery plugins like Envira Gallery make adding this feature easy. To do this, you can refer to our guide on how to add a gallery in WordPress with a lightbox effect.

These touches aren’t just “nice to have”; they show visitors you’ve thought about their experience. This can make them more likely to stick around and explore. 🕵️

FAQs: Adding a Scroll-to-Top Effect in WordPress Using jQuery

Before we wrap up, here are some common questions readers have about adding a scroll-to-top button in WordPress.

Is a scroll-to-top button necessary for every website?

Not always. But it’s a smart addition for pages with a lot of content. On long blog posts or tutorials, it saves visitors from the hassle of scrolling all the way back up, which makes their browsing experience more enjoyable.

Will adding a scroll-to-top button slow down my site?

It shouldn’t. The plugin method is lightweight and optimized for performance, and the jQuery code snippet is tiny. So, it won’t have any noticeable impact on your site speed.

Where is the best place to put the scroll-to-top button?

Most sites place it in the bottom-right corner of the screen. This spot keeps it visible and easy to reach without distracting from the main content.

Can I use a text link instead of an image for my button?

Absolutely. Both the plugin and custom code methods can be set up with a simple “Back to Top” text link instead of an icon. The plugin offers this option out of the box, and with the code method, you just tweak the HTML and CSS to match your style.

Further Reading: More Resources Around WordPress Themes

We hope this article helped you add a smooth scroll-to-top effect on your site using jQuery. Want to dive deeper into WordPress themes? These resources will help you out:

• Most Popular and Best WordPress Themes
• What Happens When You Switch Your WordPress Theme?
• Things You MUST DO Before Changing WordPress Themes
• What Is a WordPress Theme Framework and What Are the Best Theme Frameworks?
• How to Customize Your WordPress Theme
• How to Find Which Files to Edit in a WordPress Theme
• How to Use WordPress Theme Customizer Like a Pro
• A Complete Beginner’s Guide to WordPress Full Site Editing

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.