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='//'/>

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

<script type='text/javascript'>//<![CDATA[
(function ($) {
    $.fn.backToTop = function (options) {
        var $this = $(this);
        .click(function () {
            $("body, html").animate({
                scrollTop: "0px"
        var $window = $(window);
        $window.scroll(function () {
            if ($window.scrollTop() > 0) {
            } else {
        return this;

  • Now add the following line just before </body>
<img id='back-to-top' title='Back To Top' src=''/>

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

bottom: 10px;
cursor: pointer;
position: fixed;
right: 10px;
Holla Done,still find any problem our comments are always open.

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.