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

Do you want a smooth scroll to the top of the page effect on your WordPress site?

Learn How to Add a Smooth Scroll to Top Effect Using jQuery in WordPress – When you have a lengthy website and want to provide your customers with a simple option to return to the top, a scroll to the top effect is fantastic. It enhances your website’s user experience.

In this tutorial, we’ll show you how to give WordPress a smooth scroll-to-top effect by using jQuery and a plugin.

How and When Should You Use Smooth Scroll?

If a site doesn’t have a “sticky header menu,” users who scroll to the bottom of a long WordPress page or post have to swipe or scroll back to the top to move around the site.

Because of how annoying it may be, many people will just press the back button and leave. You thus need a button that will rapidly take viewers to the page’s top.

If you are not using jQuery, you may add this feature as a simple text link like this:

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

Quickly scrolling up the full page, will move people to the top. It works, but the result might be startling, much like when you strike a pothole.

The opposite is smooth scrolling. It will attractively slide the user back to the top. Using things like these on your site could make it a lot better for people to use.

After that, let’s look at how you can use jQuery and a WordPress plugin to provide a seamless scroll to the top effect.

How to Use a WordPress Plugin to Add a Smooth Scroll-to-Top Effect

Because you don’t need to change a single line of code to create a scroll-to-top effect on a WordPress site, this technique is suitable for novices.

Installing and turning on the “WPFront Scroll Top plugin” is the first step.

You may access Settings » Scroll Top from your WordPress dashboard after activation. Here, you may customize the smooth scroll effect and plugin settings.

To enable the scroll-to-top button on your website, first, choose the “Enabled” checkbox. Then you can change things like the scroll offset, button size, opacity, fade duration, scroll duration, and more.

If you scroll down, you’ll see more options, like changing how long it takes for the button to hide, turning on the option to hide the button on mobile devices, and hiding it in the wp-admin panel.

Additionally, you may change what happens when a button is clicked. Although it defaults to scrolling to the top of the page, you may adjust it to scroll to a certain post element or even a link to another page.

You may also choose to move the button’s placement. You may opt to relocate it to any other corner of the screen other than the default position in the bottom right corner.

The plugin also provides a variety of pre-built button designs. You ought to have no trouble locating a design that goes with your website.

There is an option to add a custom picture from the WordPress media library if you can’t find a pre-built image button that works for you.

Simply click the “Save Changes” button when finished.

Visit your website right away to observe how the scroll-to-top button works.

WordPress’s Smooth Scroll to the Top Effect using jQuery

It’s not advised for novices to use this technique. Since it necessitates adding code to your website, it’s best for those who are used to altering themes.

To add the smooth scrolling top effect to your WordPress theme, we’ll need jQuery, some CSS, and one line of HTML.

Create a file by opening a text editor first, such as Notepad. Save it under the name smoothscroll.js.

The next step is to copy and paste the following 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;
        });
});

After that, you may download the file and upload it to your WordPress theme directory’s /js/folder. For more information, please look at our tutorial on how to use FTP to upload files to WordPress.

You may create a /js/directory in your theme and add smoothscroll.js there if one isn’t already there. For additional information, visit our guide to the WordPress files and directory structure.

This jQuery script will provide a button that sends visitors to the top of the page with a smooth scrolling effect.

The smoothscroll.js file has to be loaded into your theme as the following step. We’ll need to enqueue the script in WordPress in order to do that.

Simply copy and paste this code into the functions.php file for your theme after that. Direct manipulation of the theme files is not advised since even a little error might cause your website to malfunction. Instead, use a plugin like WPCode and follow our steps for “Learn How to Add Custom Code to WordPress Quickly (Without Breaking Your Site)”.

1	`wp_enqueue_script(` `'smoothup', get_template_directory_uri() .` `'https://cdn2.wpbeginner.com/js/smoothscroll.js',` `array(` `'jquery'` `),` `'', true );`

Let’s create a real link to our WordPress site that returns users to the top now that we have implemented the jQuery component. Simply add this HTML code wherever in the footer.php file of your theme.

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

The HTML code has a link, but there is no anchor text, as you may have seen. This is due to the fact that a back-to-top button will be shown using an image icon with an up arrow.

We are utilizing a 40x40px icon in this example. Simply add the following custom CSS to the stylesheet for your theme.

In this code, the button’s background image is an image icon, and its location is fixed. A little CSS animation that spins the button as the user moves their mouse over it has also been included.

#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;
}

Make sure to substitute the image URL you want to use for https://www.example.com/wp-content/uploads/2013/07/top icon.png in the CSS above. Using the WordPress media uploader, you may add your own picture icons. Copy the image URL, and then paste it into the code.

We hope that using jQuery, you were able to create a seamless scroll to the top effect on your website. Read our tutorial “How to Transfer Your WordPress.com Blog to WordPress.org” as well if you want.

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