How to create a scroll to Top-Bottom button using jQuery and CSS

In this tutorial, we will show you how to create a Top-Bottom button using jQuery and CSS. This Top-Bottom button enhances the navigation experience of your website with long pages. After the browser window has been scrolling down, a button will automatically appear on the right-bottom corner of your forum. Once this button is clicked, the page will be automatically scrolling up or down.

The icon of the Top-Bottom button is created using font awesome.

CSS Code:
The following CSS code is used to add some style to the Top-Bottom button.

Code:


.scrollToTop {
  background: #2193e6;
  color: white;
  position: fixed;
  z-index: 4000;
  bottom: 143px;
  right: 20px;
  border-radius: 2px;
  padding: 9px 10px;
  cursor: pointer;
  display: block;
  font-size: 18px;
}
.scrollToDown {
  background: #2193e6;
  color: white;
  position: fixed;
  z-index: 4000;
  bottom: 100px;
  right: 20px;
  border-radius: 2px;
  padding: 9px 10px;
  cursor: pointer;
  display: block;
  font-size: 18px;
}

HTML Code:
Define an HTML link element to display the Top-Bottom button on the webpage, which will take the user to the top & bottom of the webpage when clicked.

Code:


<div style="display: block;" class="scrollToTop"><i class="fa fa-angle-up"></i></div>
<div class="scrollToDown"><i class="fa fa-angle-down"></i></div>


jQuery Top-Bottom Button Script
The following script shows how you can integrate the Top-Bottom button on the web page.

Code:

   
$(document).ready(function(){
   
   //Check to see if the window is top if not then display button
   $(window).scroll(function(){
      if ($(this).scrollTop() > 100) {
         $('.scrollToTop').fadeIn();
      } else {
         $('.scrollToTop').fadeOut();
      }
   });
   
   //Click event to scroll to top
   $('.scrollToTop').click(function(){
      $('html, body').animate({scrollTop : 0},800);
      return false;
   });
   
   $('.scrollToDown').click(function(){
      $('html, body').animate({scrollTop:$(document).height()},800);
      return false;
   });
   
});

Follow the simple steps to create scroll Top-Bottom button for your forums.

View Demo