Golang React JS Technology Blog

jQuery example of scroll to top

<!DOCTYPE html>
<html>
<head>
<style>
.scrollToTop {
  margin: 0 30px 20px 0;
  text-align: center;
  text-decoration: none;
  position: fixed;
  bottom: 0;
  right: 0;
  display: none;
}

.scrollToTop:hover {
  text-decoration: none;
}

body {
  height: 5000px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {

  var visible = false;
  //Check to see if the window is top if not then display button
  $(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    if (!visible && scrollTop > 100) {
      $(".scrollToTop").fadeIn();
      visible = true;
    } else if (visible && scrollTop <= 100) {
      $(".scrollToTop").fadeOut();
      visible = false;
    }
  });

  //Click event to scroll to top
  $(".scrollToTop").click(function() {
    $("html, body").animate({
      scrollTop: 0
    }, 800);
    return false;
  });

});
</script>
</head>
<body>
<a href="#" class="scrollToTop" style="display: none;">Top</a>
</body>
</html>
Most Helpful This Week
jQuery check if an element is visible or hidden How to set checkbox and radio option checked on load with jQuery? ES6 method of declaration multiple variables in one line jQuery get the coordinates of div clicked How to current URL, HOST and URL attributes using JavaScript or jQuery? How to declare and print value of variable in JavaScript?