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>
Member Avatar

LastMitch

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:

You need to post an image on how it looks. It would be helpful having an image with the code to match see the issue.

This is not problem of image, as i said the image is visible but just in one position, it does not go down if i scroll to the bottom. Its name is fb2.png 9692aef49d15f04936ac7167d6a9a33f

Your problem is your id that you're using on your div
<div id="slidebar"></div>

But in your CSS you have
#sidebar

Member Avatar

LastMitch

This is not problem of image, as i said the image is visible but just in one position, it does not go down if i scroll to the bottom. Its name is fb2.png

I think you didn't understand what I said. I never said post an picture of an icon/logo. I meant post the image of how it looks like from your website not an image of an icon/logo. By seeing the image of how it looks on your webiste with your code, so it would be helpful.

You can try the tweak that pixelsoul suggested.

Great help pixelsoul! ! ! and thanks to mits for interest :p