Add a nice back to top button on your web page

I don't have content on page.That's why i'm giving 1200px height to body. Initially back to top will not visible due to display:none property and i set position to fixed.

Then adjust the position from right and bottom.After that i give border-radius:50%, that make the button in circular shape and give transition to 300ms.On hover i give slightly dark background to that button.

Step 3:- Inculde JS

   <script src="jquery-1.11.3.min.js"></script>    

Add the jQuery library file just before the end of body tag.

You can download the latest version of JQuery library file from http://jquery.com/

 Now add the code in your script tag just below your jquery library file :-

         $(document).ready(function(){
               var scroll_pos = 0
               $(document).scroll(function() {
               scroll_pos = $(this).scrollTop();

		        if(scroll_pos > 150) {
		            $('.backToTop').fadeIn(300);
		        }
		        else {
		              $('.backToTop').fadeOut(300);
		        }
		      });
		    
		    $('.backToTop').click(function(){
		        $('html,body').animate({scrollTop: 0}, 500);
		    });
          });

When document is ready we will give scroll_pos to 0.After that when scrolling reaches to greater than 150px the back to top become slowly fadeIn. When end user click on this button.This will take user automatically at the top of page and gets fadeOut in 300ms. Using jQuery animate we will set scroll position to zero in 500ms when user click on back to top button.

That's it.

Use this code in your Page and this leads to avoid user to scroll top.When there is so much content on page.

You can see the demo at => https://jsfiddle.net/rohitgoyal9293/xf34zcvy/

Note:- The above code will tested on latest version of firefox and chrome.