Blogger Ever

How to create a floating back to top button in Blogger?

How to create a floating back to top button in Blogger?

Back to top button helps a reader to scroll up instantly with just one click.This post will tell you how to create a smooth back to top button using a Jquery plugin.The button will float using a bit CSS.One more feature that this plugin provide is when a reader is at top scroll means there is not more space above to scroll then the button will hide (fade out) and when there will a scrolling space available,the button will appear (fade in). Follow the steps below to make it work.
  • If you do not have Jquery in your template then add the follow script just after <head>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'/>

  • Now add the following script just before </head>

<script type='text/javascript'>//<![CDATA[
(function ($) {
    $.fn.backToTop = function (options) {
        var $this = $(this);
        $this
        .hide()
        .click(function () {
            $("body, html").animate({
                scrollTop: "0px"
            });
        });
        var $window = $(window);
        $window.scroll(function () {
            if ($window.scrollTop() > 0) {
                $this.fadeIn(500);
            } else {
                $this.fadeOut(500);
            }
        });
        return this;
    };
})(jQuery);
//]]></script>
<script>
  $(document).ready(function(){
 $(&quot;#back-to-top&quot;).backToTop();
  });
  </script>

  • Now add the following line just before </body>
<img id='back-to-top' title='Back To Top' src='https://lh5.googleusercontent.com/-d-Yz98BC5iY/UdrBtpm4III/AAAAAAAACUo/1MWDaapbS4o/s50/up.png'/>

  • Replace the highlighted link with your desire image link (if you want to change).
  • Add the following script just before ]]></b:skin>


#back-to-top
{
bottom: 10px;
cursor: pointer;
position: fixed;
right: 10px;
z-index:1000000;
}
Holla Done,still find any problem our comments are always open.
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.