Add Simple Scroll To Top Button With jQuery To Blogger - Helper Blogger

Blogger Widgets | Templates | Tutorials


Wednesday, 22 February 2012

Add Simple Scroll To Top Button With jQuery To Blogger

In this post I will give you a tutorial about adding the simple scroll to top button to your blog.Here I have used CSS and jQuery.When any visitor clicks on it the Scrolling Starts from bottom with a Certain speed and it Ends with Gradually Decreases the speed,this effect is looks more attractive.Now lets see how to add  this button to your blog.

How To Add Simple Scroll To Top Button To Blogger>

  • Go to Blogger Dashboard > Design > Edit HTML.
  • Now find for tag </body> in your blog.
  • Add below code just above/before </body> tag.

<style type="text/css">
#hb-gotop{-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}
<script type="text/javascript" src=""></script>
<script type='text/javascript'>
$(function() {
$.fn.scrollToTop = function() {
if ($(window).scrollTop() != "0") {
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() == "0") {
} else {
$(this).click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow")
$(function() {
<a href='#' id='hb-gotop' style='display:none;'>Scroll to Top</a>
Now you have successfully added this button to your blog.

No comments:

Post a Comment

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM