Add a Smooth Scroll to Top Effect in WordPress Themes

This tutorial is created for a DIY intermediate user who is comfortable editing their themes. If you want to use a plugin method, then please use smooth page scroll to top plugin. For those who want to learn how to do this without a plugin, then please continue on reading.

What is Smooth Scroll and When to use it?

When a page or post has a lot of content users are forced to scroll down to read those contents. As users scroll down, all your navigational links go up. When users are done reading that article they need to scroll up to see what else to do on your website. Scroll to top button quickly sends users to the top of the page. You can add this as a text link without using jQuery, like this:

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

It just sends users to the top of the page and scrolls up the entire page in milliseconds. It is functional, but kind of like a bump on the road. Smooth scroll is opposite of that. It smoothly slides user back to the top of page. This creates a nice effect and improves the user experience.

Adding Smooth Scroll to Top Effect with jQuery in WordPress

To add a smooth scroll to top effect, we will be using jQuery, some CSS and a single line of HTML code in your WordPress theme. First open a text editor like Notepad. Create a file and save it as smoothscroll.js. Copy and paste this code in 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; }); });

Save the file and upload it to your WordPress theme directory’s /js/ folder. If your theme does not have a  /js/ directory, then create one and upload smoothscroll.js to it. This code is the jQuery script that will add smooth scroll effect to a button that takes users to the top of the page.

Next thing you need to do is to add the smoothscroll.js to your theme. To do that nicely, we will enqueue the script in WordPress. Copy and paste this code to your theme’s functions.php file.

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

In the above code, we have told WordPress to load our script and also load jQuery library since our plugin depends on it. Now that we have added the jQuery part, lets add an actual link to our WordPress site that takes users back to the top. Paste this HTML any where in your theme’s footer.php file.

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

As you noticed that we have added a link but have not linked it to any text. That’s because we will be using an image icon with upward arrow to display a back to top button. In this example we are using a 64x64px icon. Add this to your theme’s stylesheet.

 #smoothup { height: 64px; width: 64px; position:fixed; bottom:50px; right:100px; text-indent:-9999px; display:none; background: url("https://www.example.com/wp-content/uploads/2015/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, we have used fixed position for our image icon and used an image icon as the background image. You can upload your image icon using WordPress media uploader and then get the image url to paste it as background url. We have also added a little CSS animation to the button which rotates the button when a user takes their mouse over it.

Related Helps

Properly Enqueue Scripts in WordPress

Below is an example code that you would paste in your plugins file or in your theme’s functions.php file to properly load scripts in WordPress Themes.

 <?php function wpb_adding_scripts() { wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true); wp_enqueue_script('my_amazing_script'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); ?> 

Explanation:

We started by registering our script through the wp_register_script() function. This function accepts 5 parameters:

• $handle – Handle is the unique name of your script. Ours is called “my_amazing_script”
• $src – src is the location of your script. We are using the plugins_url function to get the proper URL of our plugins folder. Once WordPress finds that, then it will look for our filename amazing_script.js in that folder.
• $deps – deps is for dependency. Since our script uses jQuery, we have added jQuery in the dependency area. WordPress will automatically load jQuery if it is not being loaded already on the site.
• $ver – This is the version number of our script. This parameter is not required.
• $in_footer – We want to load our script in the footer, so we have set the value to be true. If you want to load the script in the header, then you would say false.

After providing all the parameters in wp_register_script, we can just call the script in wp_enqueue_script() which makes everything happen.

Now some might wonder why are we going the extra step to register the script first and then enqueuing it? Well, this allows others the site owner to deregister your script if they want to without modifying the core code of your plugin.

Some Icons You Might Like

Linking To Specific Points on a Page

When we want to link to a specific point on a page, the standard tool that HTML provides is the named anchor. Here’s how that works:

• At the destination point (e.g. a Contact form at the bottom of the page), we add a named anchor tag at the start of the section:
  <a id="contact"></a>
  This is an invisible element that doesn’t appear to visitors in the browser.
• To link to this point (e.g. from the top of the page), we link using the hash character (#) and the name of the destination anchor:
  <a href="#contact">Go To Contact Form</a>

While this default method is fully functional, there’s a usability problem: clicking that link makes the user jump instantly to the bottom of the page. Because the user doesn’t see any of the content between the link they clicked (at the top of the page) and the destination content (at the bottom of the page), they feel lost and the relationship between sections is destroyed.  A clear representation of this relationship was the original reason for condensing the multiple sections into a single page, so we post the article above.