Nirjonadda
Member
How to add Scroll To Top button?
<a onclick="document.location.hash='top'; return false;">Top</a>
In that case it's more like:Please can add any image icon ?
<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>
<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>
It's not automatic, you have to click it.its not working when i am Scrolling. Its showing At the bottom on left side.
<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>
title="Back To Top"
img src="{vb:raw vboptions.bburl}/images/MY IMAGE.png"
<img src="{vb:raw vboptions.bburl}/images/MY IMAGE.png" title="Back To Top" />
<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>
<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>