Home

BackToTop : button «Back to top» appears when scrolling down your page - jQuery plugin

Késako ?

This plugin will add a "Back to top" link automatically to your page.

All is create by BackToTop plugin. No HTML code required !!

You can easily find thousand plugins like that, but our is more customizable than all others (go to the demonstration page to see it) !
The link is entirely skinnable with css. In the demonstration page, the link is full CSS3. But you can adapt it for IE (IE is bad, please delete it from your computer).

Optionally it can benefit from the jQuery Easing plugin with a different easing animation for the page scrolling.

BackToTop download package

  • BackToTop v1.0
    • jquery
      • BackToTop.jquery.js
      • BackToTop.min.jquery.js
      • jquery-ui.js (optionnal)
      • jquery.js
    • css
      • BackToTop.jquery.css
    • index.php

BackToTop implementation

1. First, include the CSS & jQuery files

<!-- include CSS & JS files --> <!-- CSS file --> <link rel="stylesheet" type="text/css" href="BackToTop.jquery.css" media="screen" /> <!-- jQuery files --> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script type="text/javascript" src="BackToTop.min.jquery.js"></script>

2. HTML code

<!-- Very simple --> <!-- no HTML code, the link is create by JS \o/ --> <!-- simple no ? -->

3. Finally, make a simple BackToTop plugin call

<script type="text/javascript"> $(document).ready(function(){ // simple BackToTop plugin called BackToTop(); // more complex BackToTop plugin called BackToTop({ text : 'My awesome text', autoShow : false, timeEffect : 750 }); }); </script>

BackToTop options

text
String
Default : '^ Back to top' - Text written into the link
autoShow
Boolean
Default : true - Does the link appears during scrolling on the page or always appears ?
timeEffect
Integer
Default : 500 - In ms, time to scroll from the bottom to the top of the page
effectScroll
String
Default : 'linear' - all jQueryUI effects allowed.
appearMethod
String
Default : 'slide' - How does the link appear ? Can be set to 'fade', 'slide' or empty

Who use BackToTop on the web ?

If you use BackToTop Plugin into your website and you want to be added here, please contact us !
We will add you with pleasure :)

How can you help us ?

If you love our work, you can show us your admiration by having a look on the ads, free for you, good for us =).THANKS !