Having issue to implement top to bottom. When i open the webpage, everything works properly, just the image which should be appeared in middle or bottom of the page, currently is shown only in the upside.
<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>
</script>
</head>
<body>
<br>
abcabcabc