• 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

Max Taxable

The Wyatt Earp of Anti-Spam
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>
 

Max Taxable

The Wyatt Earp of Anti-Spam
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.
 

Ozzy47

Administrator
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?
 

Ozzy47

Administrator
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>
 

Ozzy47

Administrator
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?
 

Ozzy47

Administrator
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>
 

Ozzy47

Administrator
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>
 
Top