The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

BackToTop : Button "Back to top" appears when scrolling down your page

Plugin rate :

BackToTop is a plugin that adds a "Back to top" link automatically to your page.

Everything is created by the plugin. No HTML code required !!

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

Optionally it can benefits from the jQuery Easing plugin in order to provide a different easing animation for the scrolling effect of the page.

 

August, 13th 2013 : BackToTop v1.1 !! - New options : "opacity" & "top"

Implementation: 

1. FIRST, INCLUDE THE CSS & JQUERY FILES

1
2
3
4
5
6
7
<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="backtotop.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. MAKE A SIMPLE BACKTOTOP PLUGIN CALL

1
2
3
4
5
6
7
8
9
10
11
12
<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>
Options: 
text
String
Default : '^ Back to top' - Text written into the link
autoShow
Boolean
Default : true - Does the link appears during scrolling the page or is always displayed ?
timeEffect
Integer
Default : 500 - Duration (in ms) of the scrolling effect, 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
autoShowOffset
Integer
Default : 0 - Controls how many pixels the user scrolls down before the autoShow BackToTop link shows up
opacity
Float
Default : 1 - Opacity (0-1) of the BackToTop button
top
Integer
Default : 10 - In pixel, position of the BackToTop link from the top of the document
Screenshots

Comments

I added the backtotop plugin to my page.
The BackToTop div is not displayed.
The page becomes shacky when scrolled down and when the scroll stops the shack takes several more seconds and stops as well.
Any help is very much appreciated.

Hi Carlita,

Please check you don't have javascript errors with Firebug.

could you give us a link to check what is exactly the problem ?

Regards,

Thanks for your quick reply.
The site is http://southweststory.com/StoryDescription.php?id=hisctr
I tried with IE9, IE8 and firefox 15.0.1.

(Just so you know. Since several days now there is a big issue with my web host with my site being at best very choppy meaning it is up 1 minute and down for the next 2, 3 hours - this morning being down almost all the time!!!
It will help me a lot if you can email me if you CANNOT access the site.)

Thanks,

Carlita

I can access the site.

Just put a z-index to 999 line 279 of your css file :)

I do not think it is the z-order problem (though I will try it°.
If you go to other pages of the site you will see the nice BackToTop div in the right bottom corner.
The storydesctiption.php page is the only one where it does not show indeed.
The code (that you have provided for the plugin) is added to a file called leftmenu.php that is run by php on each page

Its Not working on IE

wow brilliant nice work i really appreciate this. keep it up.

http://www.deepdesigncompany.com/

nice plugin , you have to set

a#BackToTop{
position:fixed;
display:none;
/* other attributes */
}

Thx for the great script! how can I make it possible, that the link appears at a certain point/amount of pixels from top?

Hi Roeland,

Actually, it's not possible. But it's a great idea for the next version :)

Regards

Hi Roeland,

It's now possible with the new option 'autoShowOffset' !
You can see it on our demonstration page.

Regards,

Sweet :-) thx very much!

Hi!
Thank your for this nice plugin! It works perfect.
I removed the 'top'-option from the plugin, so I can define a bottom value for the button in my css... now the button appears in the bottom right corner of my website (there's already a menu in the top right corner of the site, that is why).
Regards

Hi I've been using your plugin for a while on my help pages and it is working well. I have now been asked to display my help content in a scrolling iframe. Is there a way I can add your plugin to scroll in the iframe instead of the whole page?
THanks,

hi, im a total newbie. i downloaded the backtotop-master folder, extracted it and put it in my plugins folder. then i went to my dashboard but it doesnt seem to be appearing there. help please!

Hello,
I want Back to top to be appear and left side bottom :)

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.3
jQuery U.I
>= 1.3
Current version
1.1
Browsers compatibility
Google ChromeIE 7IE 8IE 9Mozilla FirefoxOperaSafari
Fork it on github Comments [16]