The Best 4 Entertainment: Animated Back to Top / Scroll to Top button widget for Blogger

Today we are going to add a animated Back to Top / Scroll to Top button widget for Blogger and blogspot blogs using javascript and jquery. This widget makes it simple for your visitor to return to top the page in a special animated style by just clicking the button, which always remains on the right bottom of the screen. There are many styles and back to top buttons to choose from...

Common Steps for any Styles

Log into your dashboard. Than go to Layout , now click on edit/html
Find the bellow code

<body>

and replace it with this code

<body>
<script src='http://files.bloggerwidgets.cz.cc/js/jquery-1.3.2.min.js' type='text/javascript'/>
        <script src='http://files.bloggerwidgets.cz.cc/js/jquery.scroll.pack.js' type='text/javascript'/>
        <script src='http://files.bloggerwidgets.cz.cc/js/jquery.easing.js' type='text/javascript'/>
        <script type='text/javascript'>
            $(function() {
                $("#toTop").scrollToTop({speed:1000,ease:"easeOutBounce",start:700});
            });
        </script>

Style 1 Back to Top with Text only

Be sure you have completed the above Common steps
Now find

]]></b:skin>

and replace it with this code

#toTop { width:100px;background:#f1f1f1;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }
]]></b:skin>

Again find

</body>

and replace it with this code

<a href="#" id="toTop">^ Scroll to Top</a>
</body>

Save your Template. check the new back to top blogger widget

Style 2 Back top Top with Image button

First complete the common steps on the start of the page
Now find

]]></b:skin>

and replace it with this code

#toTop {position:fixed;bottom:10px;right:10px;cursor:pointer;}
]]></b:skin>

Now find

</body>