jQuery Smooth Scroll to Top in a HTML Webpage / floating back to top button html

generating preview

<html> <head> <style> body{ font-family:'Verdana', sans-serif; background:#ffffd9; } </style> </head> <body> Scroll Down <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> Scroll Down <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> Scroll Down <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> Scroll Down <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> Scroll Down <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> Scroll Down <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <a href="#" id="scroll" style="display: none;"> <span> </span> </a> <style> #scroll { position:fixed; right:10px; bottom:10px; cursor:pointer; width:50px; height:50px; background-color:#3498db; text-indent:-9999px; display:none; -webkit-border-radius:60px; -moz-border-radius:60px; border-radius:60px; } #scroll span { position:absolute; top:50%; left:50%; margin-left:-8px; margin-top:-12px; height:0; width:0; border:8px solid transparent; border-bottom-color:#ffffff; } #scroll:hover { background-color:#e74c3c; opacity:1;filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)"; } </style> <script> $(document).ready(function(){ $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $('#scroll').fadeIn(); } else { $('#scroll').fadeOut(); } }); $('#scroll').click(function(){ $("html, body").animate({ scrollTop: 0 }, 600); return false; }); }); </script> </body> </html>

How to Use this Elements / Source Code:

You Can Use jQuery Smooth Scroll to Top in a HTML Webpage / Back to Top jquery elements by select the above source code (CTRL + A) then copy the code (CTRL + C) and paste (CTRL + V) it in a blank html Page to initially test it. Then you can use the Above jQuery Smooth Scroll to Top in a HTML Webpage / Back to Top jquery where ever you want for your project.

Usage of jQuery Smooth Scroll to Top in a HTML Webpage / Back to Top jquery :

You Can Use this elements when the page height is too long and suddenly you need to scroll up Page at the top of the page then this source code is too compatible. This types of website allow the back to top button to get rid of feeling bored. Thats why we use jquery scrolltop or javascript scroll to top of page to engage user better. Blogs, News website, Result showing website can surely use this source code.