*Help needed* Fade in 'Back to top' fixed bar when user scrolls then fade-out

JavaScript
1

Hi there,
I need some help. I’m trying to get my fixed footer-style back-to-top bar to fade-in once the user scrolls beyond a certain point, this is what i’ve got so far but it won’t work.
Any idea way.

CSS:
#fixed-backtotop{
position:fixed;
padding:10px;
left:0px;
bottom:0px;
width:100%;
background-color:#5A9BE0;}

<script>

$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$(‘#fixed-backtotop’).fadeIn();
} else {
$(‘#fixed-backtotop’).fadeOut();
}
});
</script>

</div>
<div id=“fixed-backtotop”>
<a class=“btt” href=“#” onclick=“return false;” onclick=“return false;” onmousedown=“resetScroller(‘header’);”>Back to Top</a>
</div>

To clarify, i have to scroll to the top of the page working, however i only want the div to appear once the user scrolls beyond say 100px.

2

Hi,

Welcome to the forums :slight_smile:

At first glance, it seems that the fadeIn code is firing again and again when the user scrolls.

Try adding a check to see if the element is already visible, before attempting to fade it in:

$(window).scroll(function(){
  if ($(this).scrollTop() >= 100 && !$('#fixed-backtotop').is(":visible")) {
    $('#fixed-backtotop').fadeIn();
  } elsif ($(this).scrollTop() < 100 && $('#fixed-backtotop').is(":visible")){
    $('#fixed-backtotop').fadeOut();
  }
});

If that doesn’t work (untested), please post a link to a page where I can see this not working.

3

I did a awesome one here http://www.websitecodetutorials.com/code/jquery-plugins/a-better-jquery-back-to-top-of-page.php

4

Thanks @PicnicTutorials & @Pullo,
I managed to get Picnictutorials solution working however, i would love your help with the code. I’m a complete javascript novice.
So the code i used integrated the scroll back to top, however i already have this sorted. So i’d like to remove that piece of code however i don’t know much about the syntax.

“$(function(){$(window).scroll(function(){if($(this).scrollTop()>100){$(”#fixed-backtotop").fadeIn(1000)}else{$(“#fixed-backtotop”).fadeOut(750)}})};$(“#fixed-backtotop”).click(function(){$(“html, body”).animate({scrollTop:0},600);return false})});"

i want to remove the
“$(”#fixed-backtotop").click(function(){$(“html, body”).animate({scrollTop:0},600);return false"

However i can’t get the syntax right, can anyone help ?

5

Hi,

Like this?

$(function(){
  $(window).scroll(function(){
    if($(this).scrollTop()>100){
      $("#fixed-backtotop").fadeIn(1000)
    }else{
      $("#fixed-backtotop").fadeOut(750)
    }
  })
});