using js to scroll to top

Question

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.

Can you show some of the code where that specific div you talk about is in. And the CSS for that div? It might indeed like an answer says be the z-index but it could be something else. Are you sure you are not scrolling down and the #scrolltotop gets faded out? — putvande
– putvande, Commented Jul 25, 2013 at 18:02

apaul · Accepted Answer · 2013-07-25 18:12:50Z

1

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.

answered Jul 25, 2013 at 18:12

apaul

16.2k8 gold badges49 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DevNinja Over a year ago

Thanks a bunch... if it is not set to display: none; it is visible until you scroll down to the bottom and back up.. then the fade out takes over...

verbanicm · Accepted Answer · 2013-07-25 17:52:50Z

0

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

answered Jul 25, 2013 at 17:52

verbanicm

2,5461 gold badge16 silver badges9 bronze badges

Collectives™ on Stack Overflow

using js to scroll to top

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related