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> 
</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);
 color:#fff;
}
.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{
 padding-top:13px; 
}

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;
      KvScrollTo(offset);
      e.preventDefault();
   }
 });

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.