Smooth Scrolling Widget For Blogger

So many blogs contains lengthy pages,the readers fell difficult to navigate in page.In so many blogs or sites you may find this jQuery  Scroll to top Widget,If u your looking for that,Then go add this jQuery Smooth Scrolling Widget  to give more look and fell for your blog.Check these other jQuery Widgets

»jQuery Floating Message Box Widget

»jQuery Multi Tabber Widget

Just see Demo of Scrolling to Top and jQuery features





»First Download the Template

Step 1:Login to Blogger dashboard » layout » Edit HTML

Find(CTRL+F) ]]</b:skin>tag.

Now copy and paste below code just before ]]</b:skin> this.

#go-to-top {
padding:1px;
position:fixed;
bottom:0px;right:0px;
cursor:pointer;
}
#go-to-top img
{
height:40px;
width:35px;
border:none;
padding-right:5px;
}

Step 2:Find </head>.

Cope and paste the below just before  </head> this.

/*----------Start TechTasks Scrolling Widget Script--------------*/
<script language='javascript' type='text/javascript'>
$(document).ready(function(){

    // hide
    $(&quot;#go-to-top&quot;).hide();
  
    // fade in
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() &gt; 100) {
                $(&#39;#go-to-top&#39;).fadeIn();
            } else {
                $(&#39;#go-to-top&#39;).fadeOut();
            }
        });

        // scroll to top
        $(&#39;#go-to-top img&#39;).click(function () {
            $(&#39;body,html&#39;).animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });
});

</script>

Step 3:Find </boby>.
Now copy and paste below code just above </boby>.

<a href='#' id='go-to-top'><img alt='Back to Top' src='https://lh5.googleusercontent.com/_-A4vw5BwqxA/TZgn5J8U_yI/AAAAAAAAFcc/VE_uPCU4igQ/Up1Blue.png'/></a>

Now See The jQuery Smooth Scrolling in Your Blog

»Finally save the Template and see the preview

Happy Blogging