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
Write a function that splits an array into groups the length of size and returns them as a two-dimensional array jQuery check if an element is visible or hidden JavaScript calculate Fahrenheit from Celsius JavaScript simple alert on Click How to check if an element or HTML tag exists using JavaScript? Using jQuery delete table row on click