滚动到顶部按钮，不淡入/淡出

Question

I am trying to create a scroll to top button which fades in when user scrolls down the page.

I have managed to place the button where I want it as well as making the on click function take me to the top. However the button shows permanently, it does not fade in or out.

I have following setup:

HTML

 <a class="scrollup" href="#">Scroll To Top</a>

this is placed within a paragraph within a div tag.

Javascript

<script type="text/javascript" src="../../../../jquery-1.11.0.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
    if (jQuery(this).scrollTop() > 100) {
        jQuery('.scrollup').fadeIn();
    } else {
        jQuery('.scrollup').fadeOut();
}
});
// scroll-to-top animate
jQuery('.scrollup').click(function(){
jQuery("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});
});

CSS

.scrollup {
height: 50px;
width: 50px;
opacity:1.0;
padding:10px;
text-align:center;
background: #FFFFFF;
font-weight:bold;
color:#444;
text-decoration:none;
position:fixed;
top:75px;
right:40px;
}

As said above, the button is there permanently and does not fade in after I scroll, nor does it fade out when I click and go to the top of the page.

Thanks for any input you might have to resolve this.

Answer 1

You could refactor your code thus:

Demo Fiddle

CSS

.scrollup {
    height: 50px;
    width: 50px;
    opacity:0;
    padding:10px;
    text-align:center;
    background: #FFFFFF;
    font-weight:bold;
    color:#444;
    text-decoration:none;
    position:fixed;
    top:75px;
    right:40px;
    transition:opacity 1s ease-in;
}
.scrollup.visible {
    opacity:1;
}

jQuery

jQuery(document).ready(function () {
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 100) {
            jQuery('.scrollup').addClass('visible');
        } else {
            jQuery('.scrollup').removeClass('visible');
        }
    });
    // scroll-to-top animate
    jQuery('.scrollup').click(function () {
        jQuery("html, body").animate({
            scrollTop: 0
        }, 600);
        return false;
    });
});

Answer 2

You should set '.scrollup' to display: none;.
and your css will look like this:

.scrollup {
height: 50px;
width: 50px;
opacity:1.0;
padding:10px;
text-align:center;
background: #FFFFFF;
font-weight:bold;
color:#444;
text-decoration:none;
position:fixed;
top:75px;
right:40px;
}

and make your script like this:

jQuery(document).ready(function($){

    jQuery(window).scroll(function() {

    if(jQuery(this).scrollTop() != 0) {
        jQuery(".scrollup").fadeIn("slow");    
    }

    else {
        jQuery(".scrollup").fadeOut("slow");
    }

  });

Answer 3

i guess you have missed some parameters.

var fit = 400;//how slow/fast you want the button to show. fade in time
var fot = 400;//how slow/fast you want the button to hide fade out time

<script type="text/javascript" src="../../../../jquery-1.11.0.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
    if (jQuery(this).scrollTop() > 300) {
        jQuery('.scrollup').fadeIn(fit );
    } else {
        jQuery('.scrollup').fadeOut(fot );
}
});
// scroll-to-top animate
jQuery('.scrollup').click(function(){
jQuery("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});
});

Also i have changed if (jQuery(this).scrollTop() > 300 ) { you can change it back to 100 if working fine.