CODEWITHSUNDEEP
javascripthtmlcssscroll
DevNinja
DevNinja

Reputation: 70

using js to scroll to top

I'm trying to implement a simple "scroll to top" button on my site.

HTML:

<a href="#" id="scrolltotop"><img src="img/scrolltotop.png"></a>

CSS:

#scrolltotop {
width: 40px;
height: 40px;
position: fixed;
right: 100px;
bottom: 50px;
display: block;     
}

JS:

jQuery(document).ready(function($){
$(window).scroll(function(){
    if ($(this).scrollTop() > 150) {
        $('#scrolltotop').fadeIn('slow');
    } else {
        $('#scrolltotop').fadeOut('slow');
    }
});
$('#scrolltotop').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 500);
    return false;
});
});

When I load my page, I see the button there in the right place for a split second, then it is covered by a background of one of my divs that is down the page in my HTML structure. In the end, I can't see it anywhere on my page, and when I inspect the element it is in the right spot, just not visible.

Upvotes: 0

Views: 747

Answers (2)

apaul
apaul

Reputation: 16170

I think you just need to add an initial display:none; to #scrolltotop like so:

#scrolltotop {
    width: 40px;
    height: 40px;
    position: fixed;
    right: 100px;
    bottom: 50px;
    display:none;
}

Working Example

When using fadeIn() you need to have the element's initial display state set, so that you're not trying to fadeIn() an element that's already present.

Upvotes: 1

verbanicm
verbanicm

Reputation: 2526

Add z-index: 1000 to the back to top link so it is shown on top of everything.

Upvotes: 0

Related Questions