Simple Smooth Scrolling jQuery, HTML, CSS

Congrats, You are Subscribed to Receive Updates.

Simple Smooth Scrolling jQuery, HTML, CSS

Simple Smooth Scrolling jQuery, HTML, CSS. A small code snippet helps you to  create a scroll to top button on your page. Which helps users to reach top very smoothly and easy animation. Lite weight code in it. Let’s create a floating bottom icon for scroll to top with help of HTML and CSS. Here is your code to create HTML component  just insert it on your body  of the page. I prefer to place it at the bottom of the page before </body> tag.

<div class="back-top clearfix">
 <div class="arrow-up"> <a href="#header"><i class="demo-icon icon-up-open"> </i> </a></div> 

Here I used Fontello Icon for the u arrow, you can also use it. Here is my CSS code for it.



.back-top {
 text-align: center;
 text-transform: uppercase;
 position: fixed;
 margin: 0 auto;
 margin-bottom: 26px;
 width: 60px;
 float: right;
 right: 30px;
 bottom: 0;
 letter-spacing: 1px;
 font-size: .9em;
.back-top a {
 display: block;
 width: 60px;
 height: 80px;
.back-top a:before {
 font-size: 4em;
 /*content: "e822";*/
.back-top .arrow-up { display: inline-block; 
.back-top .arrow-up a {
 position: absolute;
 z-index: 999;
 bottom: -10px;
 width: 50px;
 height: 50px;
 background: rgb(52, 182, 238);
.back-top .arrow-up span {
 font-weight: 100 ;
 color: rgba(255,255,255,0);

.back-top:hover .arrow-up a {
 bottom: 20px;

.back-top:hover .arrow-up span {
 cursor: default;
 color: #fff;
 color: rgba(255,255,255,1);

.back-top .arrow-up a i:before{

And My jQuery  will be the below one. It helps to create smooth scrolling effect.

$('body').on('click', 'a.scroll-to', function(e){
   var hash = $(this).prop('hash');
   if ( 'undefined' !== typeof hash && hash.indexOf('#') != -1 && $(hash).length > 0 ) {
      var offset = $(hash).offset().top;

With this code. you can set the offset and make the animation speed. You can Customize it based on your taste.

 function KvScrollTo(offset, speed){
    speed = speed || 800;
    offset = Math.ceil(offset - 100);
    $('body,html').animate({ scrollTop: offset }, speed);

It works in IE10, Chrome, FireFox, And also mobile Browsers too.



About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, PHP and Data Analyst. Database Management Advance Level

Comment Below

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


Current ye@r *



Subscribe E-mail Updates

Congrats, You are Subscribed to Receive Updates.


Category Posts