Add Smooth and Animated "Scroll to Top" Button on Blogger in 1 Step

Providing easy access to visitors is essential steps to make them in contact with your Site as well as with content, In this post I am going to give your two easy and simple steps to let your visitors come back form bottom of page to Top in attractive manner. This thing done by just adding "Scroll To Top" button to your blog.
In this tutorial we talk about to types of Scripting for Blogger only. You might be hear about JQuery, it is special Scripting For Featured web applications designs. We will user this to all this feature. Let me tell you the processes.

By using Blogger CSS..

Live DAMO you can see on this page only:  At the Left Side of this page
>>>> Use the Following Code and put it Just Before the </body> Tag on your Blogger Templates.
<a title="Back to TOP" style="position: fixed; right: 15px; bottom: 15px; outline: medium none; border: 0px none;" href="#"><img border="0" alt="Back to TOP" src="http://i.imgur.com/Ffb7p.png"></a>

By using JQuery coding.

Live DAMO you can see on this page only:  At the Right Side of this page
>>>> Use the Following Code and put it Just Before the </body> Tag on your Blogger Templates.
<style type="text/css"> #w2b-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 #C9C9C9;} </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() { $("#w2b-StoTop").scrollToTop(); }); </script> <a href='#' id='w2b-StoTop' style='display:none;'>Scroll to Top </a>
You can also Customize your CSS.
Enjoy it....
Good Luck.

Posted in: Blogger,Internet,Wordpress

Related Posts: