How To Integrate jQuery Scroll To Top Control in WordPress

Scroll to top is a button that hovers in the bottom right corner of your screen that allow users to smoothly scroll right to the top of page, making a website more user friendly.


A study done by the US government in which anchor links were used at the top of the page found the following: On a long page with a large amount of information, having the content headings as links at the top of the page allows users to click to information directly, reducing scrolling and scanning.

jQuery Image Gallery Plugins

How To?

In this article we will integrate script jQuery scroll to top in wordpress manually.

Credit : Thanks to Dynamic Drive for this great script.

These 3 (three) simple steps to do :

Step 1. Download then Upload The Script

You should download below :

Right click, save as in your local computer, then upload scrolltopcontrol.js to your site in folder theme, in “wp-contents/themes/yourthemes/
also Upload the image in “wp-contents/themes/yourthemes/images“.

Step 2. Open and Customize scrolltopcontrol.js

Open that script : scrolltopcontrol.js

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: '<img src="/articles_and_tutorials/how_to_integrate_jquerry_scroll_to_top_control_in_wordpress/up.png" style="width:48px; height:48px" />', //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

Change your img src, that appropriate with your site like this:

<img src="" style="width:48px; height:48px" />

then “Save it!”

Step 3. Install to Your Site

Open your header.php file then

Add the below script to the <head> ….. </head> section.

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

Change this line, that appropriate with your site You can put the script in the theme folder or …

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/scrolltopcontrol.js">

You can make a folder for the script, example = “js” folder and change the link source like this

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/scrolltopcontrol.js">

Refresh your’s done, off course you can change the image with what ever you like and renamed with “up.png”.

How about you? Does your site uses backtotop button? Whether this function is important for your site? Please share with us in comment section below…Thanks.

Further resource :

Update : We just made a WordPress plugin for this script “Scroll to Top Plugin“.

Ensure your success in exam by using best quality testking 1Y0-A17 notes, testking PMI-001 exam dumps and testking 70-646 test engine

36 Comments to “How To Integrate jQuery Scroll To Top Control in WordPress”

Add Comments (+)

  1. Thank you for this great article, I really enjoy your blog layout.

  2. Espreson says:

    Thanks for the nice tutorial. It will add good user experience for readers…

  3. cna training says:

    What a great resource!

  4. I am not new to blogging and really value your blog. There is much prime subject that peaks my interest. I am going to bookmark your internet site and keep checking you out.

  5. That is nice to definitely find a site where the blogger knows what they are talking about.

  6. Syed says:

    nice tutorial.

  7. kevin says:

    I’d recommend to use wp template tag ‘bloginfo’ for the script insertion:

    <script type="text/javascript" src="/scrolltopcontrol.js”>

    So anybody just has to drop the js file in the theme folder.

    Btw the link to the js file doesnt work for me.

    • Eko S. says:

      Hi…that’s more efficient way, we just fixed the code use tag ‘bloginfo’. For the link to the js file, your right and the link can be accessed again now..
      Thanks for the information, we felt very helpful. :)

      • kevin says:

        U’rt welcome ;) Just saw that the php code had been ripped off my comment. Would work by integrationg a tag ?

      • kevin says:

        So yes definitely doesnt work, anyway.

      • juju says:

        The problem is when you want to distribute your theme with this file: scrolltopcontrol.js
        You have to change manually the img src…So..How to implement a relative path in a .js ??

        I’m looking for the same php function in jquery: bloginfo(‘template_url’);

        Do you know where I can find it ??

        Except that it’s perfect :o)

  8. I usually don’t usually post on many Blogs,but I love your blog, I often read here, still I just has to say thank you… keep up the amazing work.

  9. You really make good articles I would say. This is the first time I visited your site and so far I am impressed with the research you made to make this article awesome. Good Job!

  10. Thanks for these wonderful tips. My nana will love them.

  11. generic tabs says:

    Nice. Thanks for sharing. Can I take a fragment of your post to my site?

  12. moncler sale says:

    I found your site on yahoo, It is helpful. I have added it to my favorites.

  13. idelectrik says:


    Thanks for sharing !
    I try this, but when i’m on top, image is fadeout, but i can see the hyperlink and “Scroll Back To Top”.
    Any idea ?

    Thanks for your help.

    • Eko S. says:

      Em…You want the images scroll-to-top always appear?
      You can edit on file scrolltopcontroll.js and see this line

      setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},

      And change startline:100 with startline:0 like this

      setting: {startline:0, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},

      I hope this can help you.


      • Idelectrik says:

        thanks for help me!
        It’s not exactly my problem.
        When i scroll to top, the image disappear, and it’s perfect.
        But, when the image disappear (top of the page), the link still exist, so when you put your mouse on, you dont see the image, but you see a link with the legend “scroll to top (you can try on your blog…)


      • Eko S. says:

        We apologize we can’t help…because the script “scrolltopcontroll.js” wasn’t made by us. The tutorial is based this pages by Dynamic Drive.


  14. Hostgator says:

    Great post, thanks. Where is your contact details though?

  15. Wow, didnt think it was this easy (well I though it was waay harder)

  16. This is a truly extensive blog your have here but I had some questions about advertising on your website. So if you could reply to this post with a contact email, that would be big.

  17. orygamy says:

    hi, very compliment for this tutorial but with my template i have a problem when use firefox browser:
    the scroll top butto it’s uncliccable and under the template.

    here is a screen shot please can you help me?

    • reza says:

      in scrolltopcontrol.js, edit this code

      <img src=”” style=”width:48px; height:48px” />


      <img src=”” style=”width:48px; height:48px; z-index: 1001;” />

      see that I add z-index: 1001;

      • orygamy says:


        in scrolltopcontrol.js, i have edit this code


        But it don’t function, so i have add position:relative before z-index: 1001
        and it function very welllllllllllll:

        marry christmas

  18. Michelle says:

    Hi there, thanks for the great tutorial.
    Wonder if you can tell me how to change the alt tex on the button to say “retour en haut de page”as my site is french.
    Thanking you in advance.

  19. Michelle says:

    I found the solution.
    It was a firefox issue as firefox doesn’t recognize alt but the title of the image so i then added a title to the js and it now works.
    Thanks again, great tutorial and easy to follow


  20. PharmaPlanet says:

    Thanks for the article.. been looking to integrate jquery like this with wordpress for a while, dont know wordpress that much. thx!

    Dave Goodman

  21. dreamrider says:

    In this way button works on WP v.3.3, too! :D

  22. Wow, very nice effect! Wouldn’t even think there can be something like that…

    Will think about implementing the button. Cheers

  23. esty says:

    Thanks very much for your help!
    Explanation and your writing is amazing!!

    Continue and succeed!

  24. zetar says:

    Yes,your point is great,if you are interesting in packaging,plaese scan the next.
    Life is like to buy a packaging, buy a good packaging like to find a good object, we mutually consistent. Buy a bad package, simply do not fit your product, but not worth the candle, if forced to use an incompatibility with their own objects, even if married, it will not last long. Cherish life, to find a good object, buy a good packages.We are special in packaging and  Package Manufacturer and please send email to:, our website is


  1. CSS Brigit | How To Integrate jQuerry Scroll To Top Control in Wordpress
  2. You are now listed on FAQPAL
  3. Scroll To Top Plugin | DynamicWP
  4. » Blog Archive » How To Integrate jQuery Scroll To Top Control in Wordpress | DynamicWP
  5. 50+ Great Fresh Articles for Designers and Developers | tripwire magazine
  6. WordPress Picks for the Week [03/17] | Techtites
  7. Create Exclusive *Fully Customized* Blog Themes In A Snap! |
  8. 40 Magical Javascript & jQuery Tutorials | RockstarGadgets
  9. Scroll to Top « R7 Blog

Leave a Reply


Amazingly Beautiful WordPress Themes