Get Jquery ‘scroll to top’ widget for blogger or website.

‘Add scroll to top widget’ to blogger or website.This widget makes the save of time to your visitors,if your blog page has long length in height.

you can see demo at my blogger at the right bottom belowPhotobucket

You can add this widget for your blogger only in one part:-

1.Login to blogger->> Design or Template->> Edit Html

2.Now search </body> by using shortcut key ctrl+f

3.Now add the below code above </body>

<style type="text/css">
#mmb-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #000000;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function() {
    $.fn.scrollToTop = function() {
    $(this).hide().removeAttr("href");
    if ($(window).scrollTop() != "0") {
        $(this).fadeIn("slow")
    }
    var scrollDiv = $(this);
    $(window).scroll(function() {
        if ($(window).scrollTop() == "0") {
        $(scrollDiv).fadeOut("slow")
        } else {
        $(scrollDiv).fadeIn("slow")
        }
    });
    $(this).click(function() {
        $("html, body").animate({
        scrollTop: 0
        }, "slow")
    })
    }
});
$(function() {
    $("#mmb-StoTop").scrollToTop();
});
</script>
<a href='#' id='mmb-StoTop' style='display:none;'>Scroll to Top </a>

4.Save template and you are done.Photobucket

 

1 comment:

  1. @vasanthi
    Thank you very much and I wish all the best for you.

    ReplyDelete

Please comment the message if you like post or any trouble