Hi i have an issue using top to bottom plugin, while it works, the problem is that the image is visible only on top and while i scroll down the image stays top. Below is the code:
<html>
<head>
<style>
#main {
float:left;
width:500px;
background:#c9c;
}
#sidebar {
position: fixed;
right:0px;
bottom:15px;
display:none;/*hid the button first*/
}
#sidebar a {
text-decoration:none;
border:0 none;
display:block;
width:31px;
height:155px;
}
#sidebar a:hover {
opacity:.8; /*mouse over fade effect*/
}
.hi {
clear:both;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
<script type="text/javascript">
jQuery(document).ready(function(){
var pxShow = 300;//height on which the button will show
var fadeInTime = 1000;//how slow/fast you want the button to show
var fadeOutTime = 1000;//how slow/fast you want the button to hide
var scrollSpeed = 1000;//how slow/fast you want the button to scroll to top. can be a value, 'slow', 'normal' or 'fast'
jQuery(window).scroll(function(){
if(jQuery(window).scrollTop() >= pxShow){
jQuery("#slidebar").fadeIn(fadeInTime);
}else{
jQuery("#slidebar").fadeOut(fadeOutTime);
}
});
jQuery('#slidebar a').click(function(){
jQuery('html, body').animate({scrollTop:0}, scrollSpeed);
return false;
});
});
</script>
</head>
<body>
<br>
abcabcabc
<div id="main">
sdfsfs
adfas
</div>
<div id class="low">
<div id="slidebar">
<a href="#"><img src="fb2.png" border="0" alt="Go to TOP" /></a>
</div>
</div>
</body>
</html>
