Do you need a slick “Back to top” widget for your blogger blog? Then this might be the right tool for you. The reason you need put it in your blogger blog is to allow smooth scrolling to the top when you’ve reached the bottom of a post. So I’ll ask again; do you want it? If yes let’s proceed!
HOW TO ADD A “BACK TO TOP” BUTTON TO YOUR BLOG
Must Read: ADDING A SLIDE OUT RECOMMENDED POST TO BLOGGER BLOG
I want this tutorial to be short and very comprehensive to learn. So are you with me
Go to your blogger blog dashboard >>> Click Layout >>> Click Add a Gadget
Now locate the HTML/JavaScript and click it to open, if you’ve clicked it add the below code in it
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Modified by http://onenaijablog.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://2.bp.blogspot.com/-XnWU8vK9g0Q/UN-OQjmvUoI/AAAAAAAAAwM/rvX9XkXEGQs/s1600/back-to-top-button.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},
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>
Now save it and go check your blog to see what you just did live and feel how it works. Cool right!
If you do not like the default arrow, you can change it with your own arrow. To change it, replace http://2.bp.blogspot.com/-XnWU8vK9g0Q/UN-OQjmvUoI/AAAAAAAAAwM/rvX9XkXEGQs/s1600/back-to-top-button.png with your own arrow url.
TO ADD IT ON YOUR WORDPRESS
Must Read: ADDING A FAVORITE ICON (FAVICON) TO YOUR WORDPRESS BLOG/ SITE
Go to your wordpress admin panel >>> Click Appearance >>> Click Widget >>> Drag the Text widget to where you want it and paste the code. Save your work and you’re done.
How simple was it? Do you have any question regarding this? Then please do drop your comments using the comment box below. What about thoughts? Do you have them running through you? Then also drop them using the comment box below. You know that your comments and thoughts are highly important to us.
If the post is of help please do click the like button, share us and recommend us with friends. You can also subscribe to our feed for your latest updates on the go.
Don't Miss Any Post Again. Subscribe To Our Feed And Be Updated
Enter your email address below:
Powered by OnenaijaBlog