Skip to main content

Scroll to Top and Bottom

by

Every professional blogger should look after the decoration of their blog carefully so that visitors can navigate easily throughout the blog. If your blog have infinite page scroll or your post contains information, a lot, it would be very annoying for every reader to go back to the top of the page by either refreshing the page or dragging the scroll bar all the way back to the top. Jump to top (and bottom) is that's why very essential element for every blog decoration. But it would be far more stunning to scroll gradually instead of just jump to the top (which exactly Home button does). You can find this feature in almost every blog and website. This tutorial will show you how to add a modern and simple scroll button to your blog.


Before you make any changes, it's recommended to backup your blog template to avoid template crush if anything goes wrong.

Let's begin.
  1. Go to 'Blogger' dashboard.
  2. Click the drop-down arrow adjacent to 'Go to post list' icon and select 'Layout' form the drop-down menu list.
  3. Click on 'Add a Gadget'. A new window will appear that contains list of all available gadgets.
  4. Scroll down and click on 'HTML/Javascript' gadget or the '+' icon close to 'HTML/Javascript' gadget.
    Add HTML/Javascript widget
  5. Select one item from these following scrolling plugins, copy (Ctrl+C) the code and paste (Ctrl+V) it inside the content area of 'HTML/Javascript' widget. Leave the title empty.
    6. Every plugin contains two buttons; scroll to top and scroll to bottom. To disable one, find (Ctrl+F) 
    var showtop = true,
  showbottom = true;
    in the provided code and disable whichever you want by making corresponding value false.
    Scroll Plugin #1
    Screenshots
    Scrollbar is at the top of the page
    Scrollbar is at the middle of the page
    Scrollbar is at the bottom of the page
    Source
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<style type="text/css">
#topbottomcontainer {
  position: fixed;
  top: 50%;
  right: 20px;
  margin-top: -45px;
}
#scrolltotop, #scrolltobottom {
  background: #000;
  color: #bfbfbf;
  display: block;
  height: 45px;
  text-align: center;
  width: 45px;
  line-height: 45px;
  cursor: pointer;
}
#scrolltotop {
  visibility: hidden;
  opacity: 0;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {
  var at = 300,
    st = 800;
  var showtop = true,
    showbottom = true;
  var topelem = $('#scrolltotop'),
    bottomelem = $('#scrolltobottom');
  topbutton(showtop, topelem);
  bottombutton(showbottom, bottomelem);
  $(window).scroll(function() {
    topbutton(showtop, topelem);
    bottombutton(showbottom, bottomelem);
  });

  function topbutton(t, e) {
    if (t) {
      if ($(window).scrollTop() > 100) {
        e.stop().css({visibility: 'visible'}).animate({opacity:1}, at);
      } else {
        e.stop().animate({opacity:0}, at, function() {
          $(this).css({visibility: 'hidden'});
        });
      }
    } else {
      e.hide();
    }
  }

  function bottombutton(b, e) {
    if (b) {
      if ($(this).scrollTop() + $(window).height() > $(document).height() - 100) {
        e.stop().animate({opacity:0}, at, function() {
          $(this).css({visibility: 'hidden'});
        });
      } else {
        e.stop().css({visibility: 'visible'}).animate({opacity:1}, at);
      }
    } else {
      e.hide();
    }
  }

  topelem.click(function() {
    $('body,html').animate({scrollTop: 0}, st);
    return false;
  });

  bottomelem.click(function() {
    $('body,html').animate({scrollTop: $(document).height()}, st);
    return false;
  });
});
</script>

<div id="topbottomcontainer">
  <span id="scrolltotop"><i class="fa fa-chevron-up"></i></span>
  <span id="scrolltobottom"><i class="fa fa-chevron-down"></i></span>
</div>
    Scroll Plugin #2
    Screenshots
    Scrollbar is at the top of the page
    Scrollbar is at the middle of the page
    Scrollbar is at the bottom of the page
    Source
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<style type="text/css">
#topbottomcontainer {
  position: fixed;
  top: 50%;
  right: 20px;
  margin-top: -45px;
}
#scrolltotop, #scrolltobottom {
  background: #F0F0F0;
  color: #A5A5A5;
  display: block;
  height: 45px;
  text-align: center;
  width: 45px;
  line-height: 45px;
  cursor: pointer;
  -moz-box-shadow: 0 0 1px #777;
  -webkit-box-shadow: 0 0 1px #777;
  box-shadow: 0 0 1px #777;
}
#scrolltotop {
  visibility: hidden;
  opacity: 0;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {
  var at = 300,
    st = 800;
  var showtop = true,
    showbottom = true;
  var topelem = $('#scrolltotop'),
    bottomelem = $('#scrolltobottom');
  topbutton(showtop, topelem);
  bottombutton(showbottom, bottomelem);
  $(window).scroll(function() {
    topbutton(showtop, topelem);
    bottombutton(showbottom, bottomelem);
  });

  function topbutton(t, e) {
    if (t) {
      if ($(window).scrollTop() > 100) {
        e.stop().css({visibility: 'visible'}).animate({opacity:1}, at);
      } else {
        e.stop().animate({opacity:0}, at, function() {
          $(this).css({visibility: 'hidden'});
        });
      }
    } else {
      e.hide();
    }
  }

  function bottombutton(b, e) {
    if (b) {
      if ($(this).scrollTop() + $(window).height() > $(document).height() - 100) {
        e.stop().animate({opacity:0}, at, function() {
          $(this).css({visibility: 'hidden'});
        });
      } else {
        e.stop().css({visibility: 'visible'}).animate({opacity:1}, at);
      }
    } else {
      e.hide();
    }
  }

  topelem.click(function() {
    $('body,html').animate({scrollTop: 0}, st);
    return false;
  });

  bottomelem.click(function() {
    $('body,html').animate({scrollTop: $(document).height()}, st);
    return false;
  });
});
</script>

<div id="topbottomcontainer">
  <span id="scrolltotop"><i class="fa fa-chevron-up"></i></span>
  <span id="scrolltobottom"><i class="fa fa-chevron-down"></i></span>
</div>
    Scroll Plugin #3
    Screenshots
    Scrollbar is at the top of the page
    Scrollbar is at the middle of the page
    Scrollbar is at the bottom of the page
    Source
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<style type="text/css">
#topbottomcontainer {
  position: fixed;
  top: 50%;
  right: 20px;
  margin-top: -45px;
}
#scrolltotop, #scrolltobottom {
  color: #a5a5a5;
  display: block;
  font-size: 2em;
  cursor: pointer;
}
#scrolltotop {
  visibility: hidden;
  margin-bottom: 15px;
  opacity: 0;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {
  var at = 300,
    st = 800;
  var showtop = true,
    showbottom = true;
  var topelem = $('#scrolltotop'),
    bottomelem = $('#scrolltobottom');
  topbutton(showtop, topelem);
  bottombutton(showbottom, bottomelem);
  $(window).scroll(function() {
    topbutton(showtop, topelem);
    bottombutton(showbottom, bottomelem);
  });

  function topbutton(t, e) {
    if (t) {
      if ($(window).scrollTop() > 100) {
        e.stop().css({visibility: 'visible'}).animate({opacity:1}, at);
      } else {
        e.stop().animate({opacity:0}, at, function() {
          $(this).css({visibility: 'hidden'});
        });
      }
    } else {
      e.hide();
    }
  }

  function bottombutton(b, e) {
    if (b) {
      if ($(this).scrollTop() + $(window).height() > $(document).height() - 100) {
        e.stop().animate({opacity:0}, at, function() {
          $(this).css({visibility: 'hidden'});
        });
      } else {
        e.stop().css({visibility: 'visible'}).animate({opacity:1}, at);
      }
    } else {
      e.hide();
    }
  }

  topelem.click(function() {
    $('body,html').animate({scrollTop: 0}, st);
    return false;
  });

  bottomelem.click(function() {
    $('body,html').animate({scrollTop: $(document).height()}, st);
    return false;
  });
});
</script>

<div id="topbottomcontainer">
  <span id="scrolltotop"><i class="fa fa-chevron-up"></i></span>
  <span id="scrolltobottom"><i class="fa fa-chevron-down"></i></span>
</div>
    Scroll Plugin #4
    Screenshots
    Scrollbar is at the top of the page
    Scrollbar is at the middle of the page
    Scrollbar is at the bottom of the page
    Source
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<style type="text/css">
#topbottomcontainer {
  position: fixed;
  top: 50%;
  right: 20px;
  margin-top: -52px;
}
#scrolltotop, #scrolltobottom {
  background: #3f3f3f;
  color: #bfbfbf;
  display: block;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  cursor: pointer;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
#scrolltotop {
  margin-bottom: 15px;
  opacity: 0;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {
  var at = 300,
    st = 800;
  var showtop = true,
    showbottom = true;
  var topelem = $('#scrolltotop'),
    bottomelem = $('#scrolltobottom');
  topbutton(showtop, topelem);
  bottombutton(showbottom, bottomelem);
  $(window).scroll(function() {
    topbutton(showtop, topelem);
    bottombutton(showbottom, bottomelem);
  });

  function topbutton(t, e) {
    if (t) {
      if ($(window).scrollTop() > 100) {
        e.stop().css({visibility: 'visible'}).animate({opacity:1}, at);
      } else {
        e.stop().animate({opacity:0}, at, function() {
          $(this).css({visibility: 'hidden'});
        });
      }
    } else {
      e.hide();
    }
  }

  function bottombutton(b, e) {
    if (b) {
      if ($(this).scrollTop() + $(window).height() > $(document).height() - 100) {
        e.stop().animate({opacity:0}, at, function() {
          $(this).css({visibility: 'hidden'});
        });
      } else {
        e.stop().css({visibility: 'visible'}).animate({opacity:1}, at);
      }
    } else {
      e.hide();
    }
  }

  topelem.click(function() {
    $('body,html').animate({scrollTop: 0}, st);
    return false;
  });

  bottomelem.click(function() {
    $('body,html').animate({scrollTop: $(document).height()}, st);
    return false;
  });
});
</script>

<div id="topbottomcontainer">
  <span id="scrolltotop"><i class="fa fa-chevron-up"></i></span>
  <span id="scrolltobottom"><i class="fa fa-chevron-down"></i></span>
</div>
    Scroll Plugin #5
    Screenshots
    Scrollbar is at the top of the page
    Scrollbar is at the middle of the page
    Scrollbar is at the bottom of the page
    Source
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<style type="text/css">
#topbottomcontainer {
  position: fixed;
  top: 50%;
  right: 20px;
  margin-top:-52px;
}
#scrolltotop, #scrolltobottom {
  background: #3f3f3f;
  color: #bfbfbf;
  display: block;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  cursor: pointer;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}
#scrolltotop {
  visibility: hidden;
  margin-bottom: 15px;
  opacity: 0;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {
  var at = 300,
    st = 800;
  var showtop = true,
    showbottom = true;
  var topelem = $('#scrolltotop'),
    bottomelem = $('#scrolltobottom');
  topbutton(showtop, topelem);
  bottombutton(showbottom, bottomelem);
  $(window).scroll(function() {
    topbutton(showtop, topelem);
    bottombutton(showbottom, bottomelem);
  });

  function topbutton(t, e) {
    if (t) {
      if ($(window).scrollTop() > 100) {
        e.stop().css({visibility: 'visible'}).animate({opacity:1}, at);
      } else {
        e.stop().animate({opacity:0}, at, function() {
          $(this).css({visibility: 'hidden'});
        });
      }
    } else {
      e.hide();
    }
  }

  function bottombutton(b, e) {
    if (b) {
      if ($(this).scrollTop() + $(window).height() > $(document).height() - 100) {
        e.stop().animate({opacity:0}, at, function() {
          $(this).css({visibility: 'hidden'});
        });
      } else {
        e.stop().css({visibility: 'visible'}).animate({opacity:1}, at);
      }
    } else {
      e.hide();
    }
  }

  topelem.click(function() {
    $('body,html').animate({scrollTop: 0}, st);
    return false;
  });

  bottomelem.click(function() {
    $('body,html').animate({scrollTop: $(document).height()}, st);
    return false;
  });
});
</script>

<div id="topbottomcontainer">
  <span id="scrolltotop"><i class="fa fa-chevron-up"></i></span>
  <span id="scrolltobottom"><i class="fa fa-chevron-down"></i></span>
</div>
    Scroll Plugin #6
    Screenshots
    Scrollbar is at the top of the page
    Scrollbar is at the middle of the page
    Scrollbar is at the bottom of the page
    Source
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<style type="text/css">
#topbottomcontainer {
  position: fixed;
  top: 50%;
  right: 20px;
  margin-top: -57px;
  background: #3c3c3c;
  padding: 7px 5px;
  overflow: hidden;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
#scrolltotop, #scrolltobottom {
  background: #595959;
  display: block;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
#scrolltotop {
  margin-bottom: 10px;
}
.scrollbutton-active {
  color: #bfbfbf;
  cursor: pointer;
  -moz-box-shadow: 0 5px 2px #151515;
  -webkit-box-shadow: 0 5px 2px #151515;
  box-shadow: 0 5px 2px #151515;
}
.scrollbutton-inactive {
  color: #616161;
  -moz-box-shadow: 0 1px 1px #151515;
  -webkit-box-shadow: 0 1px 1px #151515;
  box-shadow: 0 1px 1px #151515;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {
  var at = 300,
    st = 800;
  var showtop = true,
    showbottom = true;
  var topelem = $('#scrolltotop'),
    bottomelem = $('#scrolltobottom');
  topbutton(showtop, topelem);
  bottombutton(showbottom, bottomelem);
  $(window).scroll(function() {
    topbutton(showtop, topelem);
    bottombutton(showbottom, bottomelem);
  });

  function topbutton(t, e) {
    if (t) {
      if ($(window).scrollTop() > 100) {
        e.removeClass('inactive').addClass('active');
      } else {
        e.removeClass('active').addClass('inactive');
      }
    } else {
      e.hide();
    }
  }

  function bottombutton(b, e) {
    if (b) {
      if ($(this).scrollTop() + $(window).height() > $(document).height() - 100) {
        e.removeClass('scrollbutton-active').addClass('scrollbutton-inactive');
      } else {
        e.removeClass('scrollbutton-inactive').addClass('scrollbutton-active');
      }
    } else {
      e.hide();
    }
  }

  topelem.click(function() {
    if ($(this).hasClass('scrollbutton-active')) {
      $('body,html').animate({scrollTop: 0}, st);
    }
    return false;
  });

  bottomelem.click(function() {
    if ($(this).hasClass('scrollbutton-active')) {
      $('body,html').animate({scrollTop: $(document).height()}, st);
    }
    return false;
  });
});
</script>

<div id="topbottomcontainer">
  <span id="scrolltotop" class="scrollbutton-inactive"><i class="fa fa-chevron-up"></i></span>
  <span id="scrolltobottom" class="scrollbutton-active"><i class="fa fa-chevron-down"></i></span>
</div>
  6. Click 'Save'. Enjoy !
If you have any questions on this, please let me know. Happy blogging.

Comments

Blogger
Disqus

Post a Comment

Comments left on this site will be moderated. Note that all comments with abusive, disruptive or explicit content and comments with links will be deleted immediately.