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 simple alert on Click jQuery Show or Hide text on button click How to the length of the longest word in the provided sentence? Edit the text of label on click using jQuery Write a function that splits an array into groups the length of size and returns them as a two-dimensional array How can I redirect the user from one page to another using jQuery or pure JavaScript?