Scroll to top button with Jquery and Css

Sometimes you have too much content in your page, so you need a button there which help you to move/ scroll / return to top/bottom of that page.

Here we are implementing the bottom to top button with the help of Css and Jquery.


HTML==>

<a  id="return-to-top" data-toggle="tooltip" title="bottom to top"><span class="glyphicon glyphicon-chevron-up"></span></a>

<div class="container-fluid" style="padding:0;">
  <div class="well" style="=float:left; width:100%; height:1500px; background:orange; color:#fff;"> Scroll down to test the scroll.</div>

JQuery==>

<script>

  /* scroll/return to top button  */
  $(document).ready(function(){ 
      $(window).scroll(function(){ 
          if ($(this).scrollTop() > 200) { 
              $('#return-to-top').fadeIn(); 
          } else { 
              $('#return-to-top').fadeOut(); 
          } 
      }); 
      $('#return-to-top').click(function(){ 
          $("html, body").animate({ scrollTop: 0 }, 600); 
          return false; 
      }); 
  });
</script>


For complete code reference  and Demo, download file from the below link provided.

click here to Dowload