ToTop Link for WordPress

A simple plugin for WordPress that adds an unobtrusive “back to top” link to your site or blog. The link uses WordPress’ included jQuery to provide a slick UX, with the link subtly appearing after the page has been scrolled, and disappearing once the user returns to the top of the page. Additionally, a smooth scrolling animation is added when the link is clicked on.

You can see an example of the plugin at work on this site. Simply scroll down the page a little bit and you’ll see the link appear in the top right corner of the page. See the configuration options below for more details on how you can customize the location and style of the link.

Get ToTop Link WordPress Plugin

Latest v1.6 / WordPress.org / Support


Installation

  • Upload plugin files to your plugins folder or install using WordPress’ “Add Plugin” feature — just search for “ToTop Link”
  • Activate the plugin
  • Go to Settings->ToTop Link in the WordPress admin area, and customize.

Configuration Options

The plugin is built to be as minimal as possible; the options are thus quite simple. You can adjust both the style and the position of the link.

Position
The position is where the link will be displayed. You can choose any of eight different positions, or us custom values to position it exactly where you want it (*NEW*).

Style
The style is how the link looks. You can choose between using a Dark image for sites with a light-coloured background, Light image for sites with a dark-coloured background, or a simple Text link. *NEW* You can now also define your own custom image to use.

If the text link style is chosen, you can further configure the link with different link/hover colours and custom wording for the link.

Frequently Asked Questions

What is the plugin license?
This plugin is released under a GPL license.

Where can I see a demo of this in action?
On this page, you should see it in the top right corner of the page.

I’ve enabled the plugin, why isn’t it displaying?
It could be that your theme doesn’t call wp_footer() (as it should). This is a pretty essential part of a WordPress theme, so we recommend you contact the theme’s designer and ask them to add it. Optionally, if you’re comfortable editing your theme file, you can add it yourself.

Changelog

1.6
Major code overhaul, improved performance, added new default SVG icons, moved Javascript to footer for better page load speed.

1.5.3
Small maintenance release.

1.5.2
Added new option to customize scroll to top speed.

1.5 & 1.5.1
Fixed “Invalid argument supplied for foreach()” error.

1.4
Added a scroll offset to allow defining when the ToTop link appears.

1.3
A quick update to fix a bug with getimagesize. Also took the opportunity to clean up the settings page.

1.2
Added custom offset and custom image features.

1.1
A quick update to fix a couple bugs and add a few extra positions. Thanks to those who commented.

1.0
This is the first version. The biggest change is that before this, the plugin was nothing.

32 thoughts on ToTop Link for WordPress

  1. On my page not working:(
    Link is not clickable for some reason…

  2. Установил, очень хорошо работает! На мой взгляд, не хватает еще одной позиции установки, это посередине. Было бы удобней.

    • Good idea. I’ll be sure to include that in the next release.

  3. Version 1.1 out now.

    @Sasa: That should fix your problem — it was a z-index issue.

    @Владимир: More positions added.

  4. Thank you Ryan! I put version 1.1 and now everything works great!

  5. I would like to have the option to change the image to one I can upload to my word press library and set as my preferred image for this plugin. Thank you, other than that, this is a great plugin.

    • Hi John, great suggestion. Expect it (and custom offsets) in the next version — hopefully out over the weekend.

    • Hey John, just FYI — Version 1.2 has just been released — a little later than expected, but it does include the ability to set the image to be anything you’d like. You can upload an image to your Media Library and then just copy and paste the URL into the ToTop Link settings.

      • Thanks Ryan! I am updating to 1.2 right now. Thank you for this, I really do appreciate it. I’ll be in touch again soon.

      • Wow, it looks awesome with my own image now, but first it wouldn’t work, but after I selected “custom” it started working fine. You can see it on my site on the left/middle area. Thanks again for a really nice app and for all your hard work!

  6. Great-looking, handy and lightweight. A plugin such as what I’m looking for. If possible, I have a small request: please add an option for the button to appear on the page. Because, I want to show the button at the end of the side bar.

    • Hi Hakan, thanks for the suggestion — I’ll add that feature in the next release.

  7. Hey Ryan,

    Excellent plugin! I was wondering if there is a line of code I can change to tell the button to only appear after they have scrolled down the page a certain amount?

    Thanks!

    • Good suggestion Matt — just updated the plugin to 1.4 and added the feature.

      • Holy crap dude, that was almost instant! You are seriously the man! Thank you so much!

  8. Plugin works as expected, beautiful.

    But I am getting this PHP warning in my server PHP error log :

    [08-Sep-2012 09:38:22] PHP Warning: Invalid argument supplied for foreach() in /home1/esoundsc/public_html/astrablog/wp-content/plugins/totop-link/totop-link.css.php on line 28″

    Any ideas ?

    thanks

  9. Ok, found out that if I leave “Custom Offset Position:: to blanks, it gives out this error. foreach() code I guess cannot handle blanks.

    I wanted Top Right, so filling up Top and Right under Custom Offset Position solves the problem of the PHP warning; otherwise error log will just keep on growing over time.

    • Currently not an option, but I’ll look at including it in the next version.

    • I’m not 100% certain, but it appears to be related to position setting of your body element. There are a lot of absolutely/fixed positioned items on there, so that could potentially mess with how the plugin positions itself. I would suggest leaving the body element as postion:relative, and then using a container/wrapper.

  10. This is a great plugin, thanks! Is there any easy way to hide on mobile? or just create a media query?

    • Hi Todd, at the moment there isn’t (other than you should be able to do it manually in your style.css by adding a media query at the end that targets the totop link). I’ll be sure to add this to the list of features for the next version though.

  11. I was googling to find a free navigate to top plugin really struck by this plugin and used this awesome plugin in my site.

  12. I’m having trouble getting an image. Here’s the link I used

    /wp-content/ uploads/red_arrow.jpg

    It may have something to do with the custom offset, but I don’t know what to put in there.

    Any suggestions?

  13. Would be great if i could select on what pages it appears, not sure how hard is to implement?

  14. [email protected] - - Reply

    Awesome plugin – many thanks. Is there an easy way to add your up arrows to a custom text?

Say something...

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>