ADDING A SLICK “BACK TO TOP” WIDGET FOR BLOGGER & WORDPRESS

Share

back to top widget for blogger and wordpress

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>

&nbsp;

<script type="text/javascript" >

&nbsp;

/***********************************************

* 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

***********************************************/

&nbsp;

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

&nbsp;

state: {isvisible:false, shouldvisible:false},

&nbsp;

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);

},

&nbsp;

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'})

},

&nbsp;

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()

})

})

}

}

&nbsp;

scrolltotop.init()

&nbsp;

</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

Comments

  1. says

    I have been searching hard for a “back to top” widget that works, and that brought me to your site. Unfortunately, I have to say that after two installs on my blog, your back to top widget does not even show up at my blog. Period. It is a very useful widget to have and any help is appreciated.

    • says

      Hello Lisa,
      Did you follow proper instruction? because i just checked the code and it’s still working fine. Implement it exactly as prescribed by me and get back to me…

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge