• OzzModz is no longer taking registrations. All registrations are being redirected to Snog's Site
    All addons and support is available there now.

Scroll To Top

Put this code in the footer at the location you want the word "Top" to appear.
HTML:
<a onclick="document.location.hash='top'; return false;">Top</a>
 
Please can add any image icon ?
In that case it's more like:
HTML:
<a href="#top" onclick="self.scrollTo(0, 0); return false;"><img src="http://yoursite.com/images/youricon.jpg" border="0" height="XX" width="XX"></a>

Where the XX height and width, you determine.
 
You can use this code, it will make the text look like a button.

Code:
<style type='text/css'>
#bttop{border:1px solid #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;}
#bttop:hover{border:1px solid #ffa789;background:#ff6734;}
</style>
<div id='bttop'>BACK TO TOP</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>

You can customize the colors to suit your needs.
 
[MENTION=3]Max Taxable[/MENTION] its not working when i am Scrolling. Its showing At the bottom on left side.
[MENTION=1]Ozzy47[/MENTION] How to add BACK TO TOP with a Image icon?
 
Something like this:

Code:
<style type='text/css'>
#bttop{border:1px solid #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;}
#bttop:hover{border:1px solid #ffa789;background:#ff6734;}
</style>
<div id='bttop'><img src="{vb:raw vboptions.bburl}/images/MY IMAGE.png" /></a></div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>
 
To get the text on hover add:
Code:
title="Back To Top"

After:
Code:
img src="{vb:raw vboptions.bburl}/images/MY IMAGE.png"

So it looks like this:
Code:
<img src="{vb:raw vboptions.bburl}/images/MY IMAGE.png" title="Back To Top" />

Not exactly sure why you would need to add another back to top button above the other one?
 
Perhaps something like this:

Code:
<style type='text/css'>
[URL=http://ozzmodz.com/usertag.php?do=list&action=hash&hash=bttop2]#bttop2[/URL] {border:1px solid [URL=http://ozzmodz.com/usertag.php?do=list&action=hash&hash=4adcff]#4adcff[/URL] ;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:50px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;}
[URL=http://ozzmodz.com/usertag.php?do=list&action=hash&hash=bttop2]#bttop2[/URL] :hover{border:1px solid [URL=http://ozzmodz.com/usertag.php?do=list&action=hash&hash=ffa789]#ffa789[/URL] ;background:#ff6734;}
</style>
<div id='bttop2'><img src="{vb:raw vboptions.bburl}/images/MY IMAGE.png" title="New Image" /></a></div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>
 
Change the entire code to this:

Code:
<style type='text/css'>
#bttop{border:1px solid #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;}
#bttop:hover{border:1px solid #ffa789;background:#ff6734;}

#bttop2{border:1px solid #4adcff ;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:75px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;}
#bttop2:hover{border:1px solid #ffa789 ;background:#ff6734;}
</style>

<div id='bttop2'><img src="{vb:raw vboptions.bburl}/images/MY IMAGE.png" title="Back To Top"/></a></div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop2').fadeIn();}else{$('#bttop2').fadeOut();}});$('#bttop2').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>

<div id='bttop'><img src="{vb:raw vboptions.bburl}/images/MY IMAGE.png" title="Back To Top"/></a></div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>
 
Back
Top