[HTML] Fancy "Scroll up" button

2014-02-11, 16:03

Tutorial: Fancy 'Scroll up' button

This is brand new css3 scroll up design with rocket. It's really nice to have it and can help a lot with speed of scrolling up page.

--> Tutorials, tips and tricks <--
Fancy 'Scroll up' button

1º - HTML
In [ic]overall_footer_end[/ic] above the [ic]</body>[/ic] put next code:

Code:: [panda=html]  <script type="text/javascript" src="http://yourjavascript.com/460495112/mrscrollup.js"></script> <div id="MrScrollUp" style="display:none;"><div class="MrScrollUp1"></div><div class="MrScrollUp2"></div></div>

2º - CSS
Add the following code to the CSS

Code:: [panda=css] #MrScrollUp div{ width:149px; overflow:hidden; position:absolute; left:0; top:0; margin:0; padding:0; } #MrScrollUp .MrScrollUp1{ background:url(http://i58.servimg.com/u/f58/14/80/95/87/rocket10.png) no-repeat -149px 0; opacity:0; height:250px; display:none; z-index:1; } #MrScrollUp .MrScrollUp2{ background:transparent; cursor:pointer; display:block; z-index:2; height:150px; } #MrScrollUp{ z-index:11; width:149px; height:250px; display:block; overflow:hidden; cursor:default; position:fixed; right:0; top:95%; background:url(http://i58.servimg.com/u/f58/14/80/95/87/rocket10.png) no-repeat 0 0; margin:-125px 0 0; padding:0; }

3º - Preview
[HTML] Fancy "Scroll up" button Hc3LETY

If you have any questions related to this topic create a topic with the following title:
Fancy 'Scroll up' button

2014-08-20, 11:56

It is just perfect !
Thanks!
Only one question!
Is it possible to add sound when someone click on it ?
Thanks again!