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.

HTML

<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. Continue reading How to Scroll top to bottom in HTML CSS jQuery