Scroll To Top

Want to add scroll to top button to your Blogger site. We have created a code you which allow you to put scroll to top on your sit. This code is easy to customize and everyone are allowed to copy the code and past on their site or blog as well. The button scroll to top will appears as you scroll down. It depends on you where you want to show the button on the right of the site or left. Customized the below code with your own. Below code is so simple no need to do work hard.

Edit HTML code to Blogger Template:

• Go to your Blogger account and open the template tabs right of your Blogger dashboard.
• Click on the edit HTML and open it. The new window appears with your template codes.
• Now press Ctrl + F the new light box will appears and put this </body> code in the box and just above this code </body> past the below code.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" > /***********************************************  * Code by www.profeedlinks.us  ***********************************************/ var scrolltotop={      //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control      //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).      setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},      controlHTML: '<img src="IMAGE LINK" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"      controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner      anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links     state: {isvisible:false, shouldvisible:false},     scrollup:function(){          if (!this.cssfixedsupport) //if control is positioned using JavaScript              this.$control.css({opacity:0}) //hide control immediately after clicking it          var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)          if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists              dest=jQuery('#'+dest).offset().top          else              dest=0          this.$body.animate({scrollTop: dest}, this.setting.scrollduration);      },     keepfixed:function(){          var $window=jQuery(window)          var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx          var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety          this.$control.css({left:controlx+'px', top:controly+'px'})      },     togglecontrol:function(){          var scrolltop=jQuery(window).scrollTop()          if (!this.cssfixedsupport)              this.keepfixed()          this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false          if (this.state.shouldvisible && !this.state.isvisible){              this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])              this.state.isvisible=true          }          else if (this.state.shouldvisible==false && this.state.isvisible){              this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])              this.state.isvisible=false          }      },           init:function(){          jQuery(document).ready(function($){              var mainobj=scrolltotop              var iebrws=document.all              mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode              mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')              mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')                  .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})                  .attr({title:'Scroll Back to Top'})                  .click(function(){mainobj.scrollup(); return false})                  .appendTo('body')              if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text                  mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text              mainobj.togglecontrol()              $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){                  mainobj.scrollup()                  return false              })              $(window).bind('scroll resize', function(e){                  mainobj.togglecontrol()              })          })      }  } scrolltotop.init() </script>

You can also customize CSS code easily with your own style like add images that are given below. Yo just need to copy the image link URL and past it to above code.

Share this post with others. Give us your feedback by commenting on our site or promote us via like us on Facebook.

---

Tweet

About Post Author:

This post is fruit of pen-clipping of Mohammad Hamza Frough, poineer of ProFeedLinks. He likes to shear about his thought and experience with others.

Read more about Mohammad Hamza Frough »