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
Fancy 'Scroll up' button
1º - HTML
In [ic]overall_footer_end[/ic] above the [ic]</body>[/ic] put next code:
- Code:
[panda=html] <!-- MrScrollUp.Start -->
<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>
<!-- MrScrollUp.End -->
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
© PunBB Design
If you have any questions related to this topic create a topic with the following title: Fancy 'Scroll up' button |