youtube SEO, tricks for blogger, wordpress tricks for earning money online youtube earning, whatsapp,windows, android & all about new technology.

Add Back To Top Button in Blogger With Smooth Scrolling

3 comments
Go Back to top smoot  Scrolling button
Forget old way pressing scrolling button for go to the top and it’s take time to reach to top add new smooth back to top button it’s very cool widget for blogger or webpage suppose your webpage is very long and user wants to go in the top of the page it’s a best way to adding a smooth scrolling button for again go to the top.

How to add back to top smooth button

Follow Below steps for Add Back to top buttong for blogger

  1. Go to Blogger
  2. Take Backup of your Blog Template
  3. Search For <head>
  4. Just Below of <head> past the following JQuery Code only if you are Not yet using Jquery Script on your blog

  5. Add Below JQuery inside the head tag only if yet you are not using Jquery script in your blog

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>

  6. Now Add Below Given Code in your blog by add a widget option
  7. Below demo indicator
    Copy and Past Below Code in Your Blog

    <!--Smooth Back to Top Button Start-->
    <script>
    jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
    if (jQuery(this).scrollTop() > offset) {
    jQuery('.back-to-top').fadeIn(duration);
    } else {
    jQuery('.back-to-top').fadeOut(duration);
    }
    });
    jQuery('.back-to-top').click(function(event) {
    event.preventDefault();
    jQuery('html, body').animate({scrollTop: 0}, duration);
    return false;
    })
    });
    </script>
    <style>
    div#page {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    }
    .back-to-top {
    position: fixed;
    bottom: 2em;
    right: 0px;
    text-decoration: none;
    color: #000000;
    background-color: rgba(235, 235, 235, 0.80);
    font-size: 12px;
    padding: 1em;
    display: none;
    }
    .back-to-top:hover {
    text-decoration: none;
    }
    </style>
    <a href="#" class="back-to-top"><img src="http://1.bp.blogspot.com/-yrOTdp6sNt4/U2M2QsgIzVI/AAAAAAAAAeM/Zp9nIUmG5Sw/s1600/back+to+top+.png" alt="Back to Top" / ></a>
    <!--Smooth Back to Top Button End-->

    Note:- you can use your favorite image for up arrow Only replace http://1.bp.blogspot.com/-yrOTdp6sNt4/U2M2QsgIzVI/AAAAAAAAAeM/Zp9nIUmG5Sw/s1600/back+to+top+.png with your image URL.

    How to Add Html/Java widget? Follow below steps to add Widget

    1. Go to Blogger
    2. Go to your blog Layout option.
    3. Now Select Add a Gadget option.
    4. Now select Html/Java Script option
    5. Now past the above code in Content area field and press save button.





Back to Top
Click Above Image for Live Demo