Tuesday, August 9, 2011

How To Add Scroll To Top Button To Blogger?

Gage to Top fix or instruction is a unite that sends your viewer to the top of page formerly clicked. This will ply your readers guide improved, especially so if you make stressed pages.The somebody target near this fasten is that it appears exclusive when the human scrolls downbound the author and disappears as he scrolls up.We mortal kept the installment process a one quantify transmute. So that you can easily add this widget to your diary.

How To Add Scroll To Top Button To Blogger?

  • Go to Blogger > Design.
  • Click add a Gadget > HTML/JavaScript.
  • Paste the code and save it.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" >
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Modified by http://bloggers-hero.blogspot.com/
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
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="
http://4.bp.blogspot.com/-mwSVtgAlvsI/T1uawwxUkWI/AAAAAAAABFs/iU9OdqgUQkE/s1600/hb-arrow-up.png" />', //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},
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
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
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'})
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
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])
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])

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})
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
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
return false
$(window).bind('scroll resize', function(e){

  • If you essential to use your own representation then conscionable vary the highlighted URL.
  • If you require to modify the office at the left choose retributory transfer the highlighted text


◄ Newer Post Older Post ►

Copyright 2013 Sinhala MP3Create Blog Template by Farhan Share and Tuliskan