Jc John Jc John - 3 months ago 6
CSS Question

back to top button doesn't hide

i am new to jquery. i am making a back to top arrow for my website, i have a problem about hiding the back to top button. It always show and never hide. All i want is to hide the button first and after maybe 90px height it will show again. Please help me with this.

Here is my jquery script from the top of my header:

<script>
$(document).ready(function(){

// hide #back-top first
$("#back-top").hide();

// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 90) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});

// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0}, 800);
return false;
});
});

});
</script>


Here is my back to top HTML :

<a id="back-top" href="#top">
<i id="back-topi" class="fa fa-arrow-circle-up"></i>
</a>


my css :

#back-top {
display: block !important;
background: none;
margin: 0;
position: fixed;
bottom: 50px;
right: 45%;
width: 40px;
height: 40px;
z-index: 100;
text-decoration: none;
color: #ffffff;
background-color: rgba(163,15,15,0.4);
border-radius: 8px !important;
}
#back-topi {
display: block !important;
font-size: 40px;
}

Answer

You have to change your CSS as well as jQuery as:

Code Snippet

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

  // browser window scroll (in pixels) after which the "back to top" link is shown
  var offset = 300,
    //browser window scroll (in pixels) after which the "back to top" link opacity is reduced
    offset_opacity = 1200,
    //duration of the top scrolling animation (in ms)
    scroll_top_duration = 700,
    //grab the "back to top" link
    $back_to_top = $('#back-top');

  //hide or show the "back to top" link
  $(window).scroll(function() {
    ($(this).scrollTop() > offset) ? $back_to_top.addClass('is-visible'):
      $back_to_top.removeClass('is-visible is-fade-out');
    if ($(this).scrollTop() > offset_opacity) {
      $back_to_top.addClass('is-fade-out');
    }
  });

  //smooth scroll to top
  $back_to_top.on('click', function(event) {
    event.preventDefault();
    $('body,html').animate({
      scrollTop: 0,
    }, scroll_top_duration);
  });

});
body {
  height: 1000px;
  margin: 0;
  padding: 0;
}
#back-top {
  display: inline-block;
  background: none;
  margin: 0;
  position: fixed;
  bottom: 50px;
  right: 45%;
  width: 40px;
  height: 40px;
  z-index: 100;
  text-decoration: none;
  color: #ffffff;
  background-color: rgba(163, 15, 15, 0.4);
  border-radius: 8px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
#back-topi {
  font-size: 40px;
}
#back-top.is-visible,
#back-top.is-fade-out,
#back-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
#back-top.is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
#back-top:hover {
  background-color: #0180ca;
  opacity: 1;
}
#back-top:hover,
#back-top:active,
#back-top:focus {
  outline: none;
  text-decoration: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="back-top" href="#top">
  <i id="back-topi" class="fa fa-arrow-circle-up"></i>
</a>