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
ES6 method of declaration multiple variables in one line How to set checkbox and radio option checked on load with jQuery? jQuery simple form with name and email validations How to check if an element or HTML tag exists using JavaScript? Image Rollover Using onMouseOver and onMouseOut jQuery show input text inside div after on click event