Receive all updates directly in your mailbox.For joining our NewsletterClick Here!

Liked Us?

X




Smooth Scrolling "Back to Top" button for bloggers

Adding an attractive "Back to Top" Button to your blogs can make it look more professional and provides an easy navigation option to the readers.This tutorial will show you how to add new "Back to Top" button with "Smooth Scrolling" and "Fade Out" effects.Actually its a JQuery script that does all the work.You can see the demo at the bottom left side of this blog post.



How to add the "Back to Top" Button


1. Go to Blogger>>Design

2. Add a new HTML/JavaScript

3. Paste the following code to it.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function(){

    // hide #back-top first
    $("#back-top").hide();
   
    // fade in #back-top
    $(function () { 
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });

});
</script>
<style>
#back-top {
position: fixed;
bottom: 30px;
margin-left: -170px;
}
#back-top a {
width: 45px;
display: block;
text-align: center;
font: 8px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #666;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
#back-top a:hover {color: #000;}
/* arrow icon undefinedspan tag) */
#back-top span {
width: 45px;
height: 45px;
display: block;
margin-bottom: 7px;
background: #777 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhomKoXFxhzuMPoo0cYjMUJKYQ3rf7733xxXG_OBtLbbFY0RjRn417AqhAO67mWi2X9UPs4XD9gKqNmYP5jRjHT9zqcjgJGGdrWlngC-MsdkQhSxsSRw8S20X6CB1Hkq1S4wz9ME0Fwb_kx/s1600/up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
#back-top a:hover span {   background-color: #000;}
</style>

<div id="back-top" style="display: block; ">
<a href="#top"><span></span><font><font>Top</font></font></a>
</div>

4. Save the Widget.

5. Drag it to the bottom left side of the footer.

6. And You are done..!!


Liked my article?Please Join my Blog Here to stay updated with lots more. 


Having any query,feel free to ask me..!!
 

6 comments:

  1. Nice post http://www.bedoitechsolutions.com/2013/09/smooth-effect-back-to-top-button-for.html

    ReplyDelete
  2. It’s really a cool and useful piece of information. I am satisfied that you simply shared this helpful info
    with us. Please stay us up to date like this. Thanks for sharing.

    ReplyDelete
  3. Nice and Informative Post. Thank admin for sharing such an amazing post.

    --->>Back To Top Button for Blogger (Exclusive!)

    ReplyDelete
  4. Always be a first-rate version of yourself, instead of a second-rate version of somebody else.

    - Ge capital care credit

    ReplyDelete
  5. Thank you for this useful and creative tool. It's awesome. Thanks a lot.

    For
    More Detail: http://www.ny-craigslist.com/2013/03/you-also-advertise-for-missing-pet-on.html

    ReplyDelete
  6. Thank you for this useful and creative tool. It's awesome. Thanks a lot.

    For More Detail: http://www.ny-craigslist.com/2013/03/you-also-advertise-for-missing-pet-on.html

    ReplyDelete