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

by Simrandeep Singh on March 23, 2010

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 “http://www.yoursite.com/wp-content/themes/them-name/scrolltotop.js
    • Go to top icon – upload it to the images folder of your theme “http://www.yoursite.com/wp-content/themes/them-name/images/gototop.png”

    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.

Article by

Simrandeep is the owner and editor-in-chief of TricksDaddy. He is a part-time blogger from India. Catch him on Google+, Facebook and Twitter.

Simrandeep has written 538 awesome articles.

{ 15 comments… read them below or add one }

Dev | Technshare March 24, 2010 at 7:36 pm

Great post simrandeep :P ,thanks
.-= Dev | Technshare´s last blog ..A Video Marketing Blueprint That Will Knock Your Socks Off =-.

Reply

George Serradinho March 25, 2010 at 10:56 am

Thanks for this, I’m going to be adding this little tool to my blog. I currently have the ‘ go to top’ link, but it does not scroll and the movement to the top is fast.

Reply

Simrandeep March 25, 2010 at 11:11 am

Its movement is smooth + it is not visible when a user is at the top of the page

Reply

George Serradinho March 25, 2010 at 9:26 pm

Yes, I see it. I have just implimented it and it looks great. Thanks for this, I just need to work on the speed now, lol.
.-= George Serradinho´s last blog ..Cheap Advertising available on Serradinho Blog =-.

Reply

George Serradinho March 25, 2010 at 9:58 pm

Hi again,

I changed the scrollduration to 2000 to give it a smoother scroll effect. Go have a look.

A quick question – why don’t you have this on your site? Just curious to know.
.-= George Serradinho´s last blog ..Cheap Advertising available on Serradinho Blog =-.

Reply

Simrandeep March 26, 2010 at 1:24 am

It’s looking nice on your blog. Now added to my site too :)

Reply

Ankit March 25, 2010 at 11:11 pm

Simply great! Going to implement in my blog. Yay! :D

Reply

Srivathsan G.K March 31, 2010 at 1:45 pm

yeah, I was searching for this past one week. I just saw this one in Amit’s blog. Thanks for sharing :)
.-= Srivathsan G.K´s last blog ..The Best VPN Software for Windows, Mac, Linux for Free – OpenVPN =-.

Reply

Simrandeep March 31, 2010 at 1:55 pm

I too noticed it on Amit’s blog 2 or 3 days back. Most of the users are now using this button on their blogs now :)

Reply

Aaslin sathrak May 4, 2010 at 4:31 pm

These back to top buttons attract bloggers,but can we make this button flashy as in bloggusion?

Reply

Simrandeep May 4, 2010 at 10:06 pm

Yes we can make it flashy like bloggusion but we need to make a new image for this purpose.

Reply

CSSReX November 11, 2010 at 3:07 pm

I have added it on my site. Thanks for sharing,

Appreciate it a alot :)

Reply

Atif February 26, 2011 at 12:37 pm

Gr8 piece of tutorial I found. Thanks so much

Reply

idris March 19, 2011 at 8:39 pm

this is awesome
thank you for sharing such a nice tutorial

Reply

kiash June 4, 2011 at 8:16 am

This button is working good! Thanks for sharing!

Reply

Leave a Comment

{ 3 trackbacks }

Previous post:

Next post:

© 2008-2013 TricksDaddy. All Rights Reserved | Privacy Policy | Sitemap | Designed by Simrandeep Singh