How to Scroll top to bottom in HTML CSS jQuery

Hello there,  I am gonna show you how to scroll top to bottom in html web page. Well, to do this, we will use jQuery library, CSS and of-courses html.

If you are running a WordPress site or planing to add scroll button on WordPress site, you may use my WordPress plugin scroll top and bottom.  You will get there 12 different set of  buttons and also custom button  upload option.

So, set us see the steps.

We are planing to use two buttons, one is to scroll to bottom and another is to scroll to top of the web page.


<div class="scroll-btn-container">
   <div id="scroll-to-top">
      <img alt="&uarr;" width="32" height="32" src="images/up_btn.png" >
   </div><!-- /#scroll-to-top -->

   <div id="scroll-to-bottom">
     <img alt="&darr;" width="32" height="32" src="images/down_btn.png" >
   </div><!-- #scroll-to-bottom -->
</div><!-- .scroll-btn-container -->

Well, the above is the html markup for the buttons where we have added two buttons with IDs.  And we will style those later. We have used two image button with height 32px and width 32px. Let's move on to the css.

Our target is to set those button on the right bottom of the web page. To do so, we will use the below css codes


cursor: pointer;
z-index: 9999;




On the above code, we have added the position of the buttons. You may put it on the head section of your html page or in a seperet style sheet. Now we will go for jQurey part and for this you must need to add jQuery library on your web page.

You may download and add the jQuery library on your site or use the Google CDN

<script src="//"></script>

In my case I have download the last version jquery-2.1.0.min.js on my server and using. Well after attaching the jQuery library we need to add the following JavaScript code with the mark up.


   $(document).ready(function() { 
       $("html,body").animate( scrollTop: 0 , 1000);
          return false;
       $('html,body').animate(scrollTop: $(document).height(), 1000);
          return false;

We have all the codes above, just use all in a proper way and I hope, now you know how to Scroll top to bottom in HTML page.  Checkout the demo and download if you wish.


Leave a Reply

Your email address will not be published. Required fields are marked *