WP To Top – a WordPress plugin that takes you to the top

About WP To Top

WP To Top is a WordPress plugin that adds a “Back to top” link in your blog without modifying your template files. This is useful especially if you have long posts or long pages. You will have a nice “Back to top” or whatever-text-you-want link floating at the bottom right/left of your page.

Features

  • Smooth scrolling animation and fade in, fade out effect, powered by the YUI library
  • Customizable options via the admin panel, from the text to the position of the link
  • Works on almost all browsers including IE6 (yes!)

Download

You can get the plugin here

Demo

You have a demo on this page. Just scroll a little bit and you will see a nice “Take me up” link appearing at the bottom of your page.

Installation

  • Extract wptotop.zip in the “/wp-content/plugins/” directory
  • Activate the plugin through the “Plugins” menu in WordPress
  • Go to “Settings” and then “WP To Top” to configure the plugin. The options are self explanatory and easy to understand.

Thanks

I got the inspiration to write this plugin after having a look at David Walsh’s jQuery topLink Plugin. Thanks to the YUI team for the great YUI library and Semih’s Animated Page Scroll with YUI.

Be Sociable, Share!

Comments (51)

  1. 5:12 am, March 6, 2009Yashvin  / Reply

    This one is NICE!

    I am gonna install it right now!
    Thanks!

  2. 2:31 pm, March 7, 2009sjdvda  / Reply

    Really great!!! Will use it for my new WordPress-powered blog!!

  3. 4:28 pm, March 7, 2009Klaus  / Reply

    Nope, doesn’t work on my blog :-(
    I’m using WP 2.6.3, uploaded and activated it but the “take me up”-box is not displayed. Neither do I get an error message or something, the backend configuration works though.

    • 5:27 pm, March 7, 2009asvin  / Reply

      Hi Klaus

      Any JS errors or anything? Can you give me the URL so that I can have a look. Thanks

  4. 9:40 pm, March 7, 2009baron  / Reply

    hi. Thanks for plugin

    perfect.

    Regards

  5. 1:53 am, March 8, 2009tt  / Reply

    Nice looking plugin but it isn’t working. I can access the edit area and make changes, but it doesn’t show up on the blog itself in FF, Opera, or Explorer.

  6. 6:06 pm, March 8, 2009asvin  / Reply

    @tt and klaus,

    Make sure you have wp_footer() in footer.php

    Asvin

  7. 2:11 pm, March 11, 2009Mark  / Reply

    Improbing Wp, thanx

  8. 4:45 pm, March 12, 2009Mateo  / Reply

  9. 7:55 pm, March 17, 2009Kurt Avish  / Reply

    Hey good work man. You Mauritian? Finally I see one local pal who made a plugin. Keep it up man. Very nice.

    • 7:57 pm, March 17, 2009asvin  / Reply

      Yeah, Mauritian 100% from birth ;-)

  10. 8:57 am, March 23, 2009Katie Dixon  / Reply

    Just installed it on a website I’m working on. At first it didn’t work, but once I added <?php wp_footer(); ?> to my footer.php file in the theme, everything was perfect. You can see it in action here http://hedwig.simplemistake.com/

    Thank you so much!

  11. 9:04 pm, March 23, 2009Evan Byrne  / Reply

    I’m sorry, this is very off-topic. But I feel you should do something different with your pink comments button, it is really annoying…

  12. 11:37 pm, March 23, 2009Eric  / Reply

    I do have in my footer.php file but it still doesn’t show up. Hope you can help cause I love this feature!

  13. 12:22 am, March 24, 2009Eric  / Reply

    Nevermind. Just inserted the java calls into the header.php – works now.

  14. 7:36 am, April 2, 2009Leon Poole  / Reply

    this looks aweseome – going to try it out soon :) thanks!

  15. 2:08 am, April 22, 2009wwwindi  / Reply

    Works only on my posts, not my pages. (Even though I unchecked the button). Got any ideas about how I could get it to work.

    Thanks!
    W

  16. 2:10 am, April 22, 2009wwwindi  / Reply

    It now works sorry to take up your time. Thanks for the great plugin!

  17. 6:58 pm, May 9, 2009nobody  / Reply

    W3C validator (http://validator.w3.org/) doesn’t like your plugin…

    Line 20, Column 115: character “&” is the first character of a delimiter but occurred as data
    …d/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/animation/animation-min.js”>

  18. 5:49 am, May 17, 2009kevin godell  / Reply

    Not sure if this will show up, but just had to html entity the ampersand on line 42. Changed & to &amp; for code to validate.

  19. 9:51 am, June 4, 2009Ella  / Reply

    Hi…! This rocks. You rock. Thank you for sharing and helping people out. I send you a virtual beer :)

  20. 4:29 pm, June 9, 2009Patrick  / Reply

    Hello, thanks for this great plugin.

    Is there a way to deactivate it if the visitor is not on a wide screen?

    Thanks,

    Patrick

    • 6:30 pm, June 9, 2009asvin  / Reply

      Hi Patrick

      Thanks, yes I think you can deactivate it. In the js file, you can make a test to initialize it, testing the screen resolution. Something like :

      if (screen.width < 1024 && screen.height < 768){
      toTop.init();
      }

      Asvin

  21. 10:29 pm, June 9, 2009Patrick  / Reply

    Asvin, thanks of lot for answering so quickly!

    I tried to put the code you gave me in the js file, but i didn’t work as expected. Where should i put the code bit exactly?

    Thanks again!

  22. 8:36 am, June 21, 2009wapakels  / Reply

    i found a bug on ie6.. i tried this on WP and with WPRemix theme, on other browsers it works perfect but when im using ie6, the page cut off because of the WP top, when i disable it, the pages loads ok..

  23. 7:10 pm, June 22, 2009asvin  / Reply

    thanks for the info wapakels, will have a look at it! But I remember testing it on IE6. Anyway will have a look ;)

  24. 11:54 pm, July 19, 2009sunday  / Reply

    your plugin is reall simple and nice.
    thanks for your good job@

  25. 2:16 am, July 27, 2009doc  / Reply

    Great wee bit of code.

    just wondered how easy it would be to get it to display a small image file rather than text? I had a look at the code and played around a bit but couldn’t find where to put in the call.

  26. 4:53 pm, July 27, 2009chrish  / Reply

    Help! I can’t get rid of the pink background colour, nor does the plugin seem to recognise my other changes to “wp-to-top.php”

    add_option(‘wpToTopText’, ‘to top’); // the text
    add_option(‘wpToTopBgColor’, ‘#FFFFFF’); // the background color
    add_option(‘wpToTopFgColor’, ‘#OOOOOO’); // the foreground color

    ALSO! the plugin is not showing in my main template pages, only in individual posts.

    Any help appreciated thanks.

    • 3:55 pm, July 31, 2009asvin  / Reply

      Hi Chrish

      Check in the admin area for the settings.

  27. 3:35 am, August 11, 2009Thor  / Reply

    Muy buen plugin… sencillo y muy útil. Quizás le falte la opción de añadir una imagen, y sería fantástico… muchas gracias por su trabajo.

  28. 8:38 pm, August 12, 2009wwwindi  / Reply

    Any way I can get the wp to top box to display correctly on an iphone? I would rather not remove it cuz it’s so handy.

    Thanks for the great plugin!

    - W

  29. 3:26 am, August 19, 2009wordpress web design  / Reply

    Hi
    This tutorial is the best of the week good work. i will bookmark your blog
    have a good day

  30. 3:16 am, September 7, 2009Ty  / Reply

    Hey,
    I just installed the WP to top, and it works great….except, only once.
    After I use it the first time, the next time I try to click it, it disappears when I get close to the square.

    I have

    and everything else is editable, could it be because I’m using the latest version of WP?

  31. 8:14 pm, December 14, 2009Mirjam  / Reply

    Thanks for your wonderfull wp to top. It works fine. Only problem to me is that I don’t want to have back at the bottom of my page, but in my content place. Is this possible?

  32. 9:00 am, December 16, 2009FUNCA  / Reply

    [ Top ]

    :p

  33. 1:20 am, December 21, 2009Rishona  / Reply

    Beautiful – works like a charm!

  34. 3:01 pm, December 21, 2009Ahmed Irfan Shafqat  / Reply

    Aswin, thanks a lot.

    I searched for “back to top plugin” in Google and your page came at the top of the results. I installed the plugin and it did not work initially although it had automatically added to fotter.php. I thought perhaps the plugin was not compatible with WordPress version 2.9. Just when I was about to uninstall it, I happened to uncheck “Show only in posts, not all pages”…and the thing started to work.

    Thanks for such a wonderful plugin. It is way better than I expected. I had just a plain Back to Top link at the bottom in my mind but this one is pretty customizable :)

  35. 1:18 am, January 11, 2010Neverhood  / Reply

    I just installed the plugin, i am using WP 2.9.1. After installation i came to know that WordPress.com stats (another plugin) has stopped working and as soon as i deactivated WP TO TOP my other plugin started working fine.
    how can i fix that?

  36. 12:44 pm, January 11, 2010teepak  / Reply

    Cool thanks for plugin.

  37. 10:05 pm, January 13, 2010Ningbo  / Reply

    Hello Asvin !

    Thank you for this great plugin !
    I just installed it and tried it today on Firefox v3.5.6 and IE7.0.6001 without any problem.
    It works also well on Opera v10.10 although the image might sometimes disappear.
    Not a big deal though as Opera is not (yet) a very popular browser.

    Thanks again for your help to the WP-community !

    Paul

  38. 9:08 pm, January 14, 2010frezco  / Reply

    How can i change the pink background colour?
    And why i can’t see the button in home page?
    Someone can help me!
    I’m getting crazy

  39. 6:10 am, February 9, 2010Kat  / Reply

    Works great. I changed this in the css so it would appear above my Google Social Bar:
    #takeMeUpContainer {
    bottom:50px;

  40. 5:43 pm, March 13, 2010Ningbo Hotels  / Reply

    Hello Asvin,

    THANK YOU for the job. Your plugin is great.

    Of course, some users like the pink icon, others do not, I guess it depends on the website’s design. Personally I like it :-)

    Still I realized that when scrolling, the icon has a tendency to slightly blink.
    Now I saw recently a similar kind of plugin but with an arrow. Again some will like it, others probably won’t.
    But the main thing is that it doesn’t seem to blink, the brightness of the icon remains the same whenever we scroll.
    Maybe you could have a look at it:
    http://www.dynamicwp.net/plugins/scroll-to-top-plugin/

    The good thing if there are 2 different styles of plugin now available is that users will be able to choose what suits best their site :-)

    Keep up the good work!
    THANK YOU!

    Roger

  41. 9:21 pm, March 22, 2010LA  / Reply

    LOVE it! Thanks :)

  42. 4:44 am, May 3, 2010LeanneBoyd  / Reply

    Thank you! Worked beautifully out of the box! I’ve used another script for years…. but now that I am migrating everything to WordPress, that script refuses to work within WP.

  43. 9:23 am, May 7, 2010mikeberns  / Reply

    Great plugin! However, I upgraded to WP 2.9.2 and while the button still appears and functions, when I try to change the colours in the admin, the default colours revert after I save the changes. Any ideas?

  44. 12:46 pm, May 10, 2010templatereactor  / Reply

    thanks for usefull info.

  45. 3:25 am, June 4, 2010Amy  / Reply

    [...] Eklenti Ana Sayfası Share and Enjoy: [...]

  46. 6:59 am, September 16, 2010Nikhil  / Reply

    Its awesome.. how to control size of box?

  47. 9:36 am, October 29, 2010Zeth  / Reply

    Yes! I’ve been looking for ages for something like this.

    Grrr.. I get angry every time IE6 is mentioned. :-)

    Z

Leave a Reply

Allowed Tags - You may use these HTML tags and attributes in your comment.

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Pingbacks (19)