Saturday, 14 September 2013
Scroll to Top Button for Blogger Blogs
Do you like this story?
A scroll to top button on your blog makes it easy for your visitors to scroll to the top of the page. The scroll to top widget, which I am sharing with you, is easy to add and you can add it within a minute to your Blogger blog. This button appears only when your visitor scrolls below from the top and it hides itself when your visitor is at the top of the page. The smooth scroll gives a cool look to your blog. Speed of the scrolling also varies and increases from top to bottom.
The widget counts divs in your template and recognizes that where your visitors is currently on the page. After this, the speed of the scroll is determined. Suppose your visitor presses “Scroll to Top” button from the middle of the page, then the page slowly scrolls up. Alternatively, when a visitor presses the button from extreme bottom of your page, the page will scroll up at a higher speed. All these features make this button unique from a common button which rapidly takes you to the top when you press it. To add this cool button to your Blogger blog, follow the below simple steps:
1. Login to your Blogger dashboard
2. Select your blog and go to its layout
3. Add a new gadget as HTML/JavaScript using the below code
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=$('
'+mainobj.controlHTML+'
').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()
Trending: Support us by your tweet
This post was written by: Shyam K
Shyam is a professional blogger and web designer. Follow him on Twitter
Subscribe to:
Post Comments (Atom)
0 Responses to “Scroll to Top Button for Blogger Blogs”
Post a Comment
Hope you like my post.. :)