0

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>
3
Contributors
5
Replies
31
Views
4 Years
Discussion Span
Last Post by leandros.ioannou
0

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.

0

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

1

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

But in your CSS you have
#sidebar

0

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.

Edited by LastMitch: grammer

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.