How to add jQuery Dynamic Go To Top Button to WordPress Blog

When the readers of a blog read the lengthy blog posts, they end up scrolling back to the top of the pages. You can reduce the efforts of your blog readers by giving them a jQuery based Scroll to top button that will smoothly take them back to the top of the page. In this way they don’t need to scroll to go back to top, just a single click and they will be back on the top of the page.

In this tutorial, I’ll explain how to add a Dynamic jQuery Scroll to top button on your wordpress blog. I’ll make use of the jQuery Scroll to Top Control by Dynamic Drive. This button is called as Dynamic as it is not shown when you are above the fold it mean on the top of the page but when you slightly move down to the page, the button will appear at the bottom right corner of the page.

How to Add jQuery Go to Top button

1. First of all download the following two files and upload them to your server :
   • scrolltopcontrol.js – upload it to the theme folder of your blog ““
   • Go to top icon – upload it to the images folder of your theme ““

   NOTE : Before uploading the scrolltotop.js file to your server, open it with text editor and change the source of the image.

2. Now sign in to your WordPress dashboard and go to Appearance -> Editor.
3. Now select header.php file from the right hand side and paste the following code before </head>
    

   <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/scrolltopcontrol.js">
   
   /***********************************************
   * Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
   * This notice MUST stay intact for legal use
   * Visit Project Page at http://www.dynamicdrive.com for full source code
   ***********************************************/
   
   </script>

   Make sure to change the source of javascript file to the one stated in Step 1.

4. Save the file and that’s all about adding a jQuery Go to Top button to WordPress.

You can customize a variety of things, such as the amount of time it takes the script to scroll back up to the top, duration of the fade in/out effect for the control, and the number of pixels the user’s scrollbar should be from the top of the page before revealing the control. Inside the .js file, here is the relevant section to modify:

setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:15, offsety:15}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

Alternative Method

If you don’t want to go into the coding part of your theme then you can use the WordPress Scroll to Top Plugin by dynamicwp team.