A Developer’s Guide Add a Smooth Scroll to Top Effect in WordPress using JQuery

Share:
Smooth Scroll With JQuery

We all love WordPress for its seamlessness and the fact that it makes things way easier when it comes to using an efficient Content Management System.

It is no exaggeration but easy and accessible web development is a blessing for new webmasters. WordPress has dozens of features that allow various website owners to provide their users with a super smooth and interactive interface.

Those who are new to WordPress, can check WordPress tutorials on resources like The Blog Starter, which has step by step guide on how to start your blog and manage it. 

If you are only focusing on just the content on your website, we would like to tell you that a responsive and visually appealing website is as important as the content.

If you have an existing website and you do not know where to begin with, take a time period and invest 30 minutes every day to think about your website’s appearance and interface. Trust us as you will gradually find the elements you need to fix. Once you supercharge your website with great visual efforts, conversation rates will increase.

And if you are someone who is already invested in providing users with a smooth visiting experience for your website, Kudos to you! Well, we have a great tutorial lined up for everyone who wants to further provide an edgy change to their website and improve their website’s overall visual performance.

In this blog post, let us guide you about adding a Smooth Scroll to the top effect in WordPress with the help of jQuery. 

Why use the Smooth Scroll?

Usually, when websites have long articles and the user is going through them, they might find it frustrating to reach the end of the webpage.

So, if your website can provide a smooth scroll to the top in just a single click, the reader will find your website seamless and super smooth.

So, if you are a website owner or a digital marketer, you need to be an opportunist and make sure that you do everything it takes to attract an additional and organic audience to your website.

Ways to Add the Smooth Scroll to Top Effect in WordPress

To be able to add a smooth scroll to To Effect in WordPress, you can go about using any of the most ways below:

1. Using some code written in jQuery

2. Using a plugin

We usually prefer coding over plugins because that leaves no room for hiccups if done the right way. Plugins can sometimes reduce the website’s loading speed but coding can help you add some customization without affecting the speed in the first place. Particularly, in this tutorial, we’ll explain the coding process.  

How to Add the Smooth Scroll to Top Effect in WordPress with coding?

In order to add a smooth scroll to top effect on your WordPress website using coding, you need to follow these four steps:

  1. Create a “Smoothscrolleffect.js” file.
  2. Attach the  “Smoothscrolleffect.js” function to your theme.
  3. Add the icon in theme
  4. Linking the effect with the webpages

Once you are done with these 4 steps, you are ready to get more readers. If you are a programmer, then you can create your own scripts as per your requirements.

For non-programmers, we have explained each step thoroughly and added the required code. So, you just have to read the steps and execute them accordingly. 

Step 1: Create a “Smoothscrolleffect.js” file

This is the most important file that you will create for this step. If you fail to implement this step effectively, then you might not achieve a smooth scroll completely.

In this step, we will create a “.js” (jQuery) file which contains a function that’ll add a smooth scroll to Top effect. Follow the steps to create a “.js” file and upload it to the website’s directory. 

  1. Create a new notepad file in your system.
  2. Copy the following code:

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;

         });

});

  1. Paste the code in the notepad file.
  2. Save it with any name but make sure the extension is “.js”.
  3. Login to your website’s cPanel.
  4. Navigate to the website’s directory “/js/”

Note: If your website doesn’t have a js directory then you have to create one. 

  1. Upload the “.js” file that you have created on your system in the directory. 

Step 2: Attach the smooth scroll to the theme 

In the above step, we have created a file (with smooth scroll function) in the directory of the website, and in this step, we will link the smooth scroll function to our theme. In order to do so, follow the steps:

Navigate to your theme editor in the WordPress Admin dashboard. Open function.php to Edit. and paste the following code in it. 

wp_enqueue_script( ‘smoothup’, get_template_directory_uri() . ‘/js/smoothscroll.js’, array( ‘jquery’ ), ”,  true );

Hit “Save Changes”.

Step 3. Add icon to theme

Obviously, you want to add an icon to your website through which you can offer the reader to scroll to the Top. Besides that, you need to make it more interactive and responsive. You can get that done with the help of CSS as follows:

  1. Navigate to the stylesheet.css of your theme in theme Editor. 
  2. Copy the following code.

#smoothup {

height: 40px;

width: 40px;

Position:fixed;

Bottom:50px;

Right:100px;

Text-indent:-9999px;

Display:none;

Background:url(“http://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;

}

  1. Paste it in the stylesheet of your theme. 
  2. Hit “Save Changes”.

Here you can change the icon as per your requirements; we have used a reference. In order to change the image, you can upload it to your website and can paste it into the Background: URL field in the above code. 

Step 4: Linking the smooth scroll with webpages. 

Now that we have created a “.js” file, and uploaded it to the website’s directory, attached it with the theme, and created an icon for the effect, its time for the final step. We will now link the smooth scroll effect to all the webpages of the website. Follow the steps:

  1. Open footer.php in theme Editor. 
  2. Copy the following code:
    1. <a href=”#top” id=”smoothup” title=”Back to top”></a>
  3. Paste it in the footer.php page.
  4. Hit “Save Changes”.

Congratulations!, you have successfully added the smooth scroll top effect to your WordPress website using jQuery. 

Conclusion

We hope that the above tutorial will effectively help you add the ‘smooth scroll to Top’ effect in WordPress using JQuery and woo your users with a great website navigation experience.

If you happen to face any issues implementing the steps mentioned above, do let us know by dropping a comment below.

Join Software Buyers & Sellers

Get top software information and best deals right on your inbox.

HubSpot CRM Sidebar
ADVERTISEMENT
Popular on Begindot.
An all-in-one employee management HR...
monday.com is a leading project management and CRM solution,...
Smartsheet is a modern project...
Salesforce is one of the...

Promo Box*

Popular EOR Solutions

EOR (Employer of Record) helps businesses hire global workforce and make human resource-related processes easier.