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
JavaScript sort multi dimensional array on specific columns Write a function that splits an array into groups the length of size and returns them as a two-dimensional array Image Rollover Using onMouseOver and onMouseOut jQuery show input text inside div after on click event How to get selected text from a select box using jQuery? JavaScript calculate Fahrenheit from Celsius How to declare and print value of variable in JavaScript? Highlight and get the details of table row on click using JavaScript Using jQuery delete table row on click How to change text after click event using JavaScript?