Tech Magazine

Adding a Slick “back to Top” Widget for Blogger & Wordpress

Posted on the 30 December 2012 by Babanature @proudlyonenaija
""&

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


Back to Featured Articles on Logo Paperblog

These articles might interest you :

  • Living with a Loft

    Living with Loft

    When I was apartment hopping, I always pictured myself living in one with a loft. Just the thought of it gave me so many design ideas that I probably wouldn't... Read more

    The 12 February 2016 by   Decorology
    ARTS & CRAFTS, HOME, HOME IMPROVEMENT, INTERIOR DESIGN
  • Tweens and Goal Setting

    Tweens Goal Setting

    Today I am pleased to introduce my special guest blogger, Renae Quinton from Crystal Clear Goal Setting, sharing her thoughts on how tweens benefit from... Read more

    The 12 February 2016 by   Thismomloves
    FAMILY, PARENTING
  • Learning To Smile On The Internet

    Learning Smile Internet

    The internet has known my face for nearly a decade now, but it was only a few weeks ago that I uploaded what I believe is the first ever picture of me... Read more

    The 12 February 2016 by   Scarphelia
    SELF EXPRESSION
  • Samuel Jackson as Scarlett O’Hara?

    Samuel Jackson Scarlett O’Hara?

    Here’s a little humor to start off your Friday.W Magazine asked some (mostly) A-List celebrities to read two iconic lines from Gone With The Wind. Read more

    The 12 February 2016 by   Robert Bruce
    BOOKS, CULTURE
  • 6 Steps To Refocus Your Business On Customer Delight

    Steps Refocus Your Business Customer Delight

    Driven to Delight Start with an overriding top-down focus on customer experience. The right message must be delivered from the top, by your words and your... Read more

    The 12 February 2016 by   Martin Zwilling
    BUSINESS, CAREER
  • IN BRIEF | Burton Albion Tickets SOLD OUT

    BRIEF Burton Albion Tickets SOLD

    Walsall Football Club have today confirmed that tickets for the Saddlers' Sky Bet League 1 clash with league leaders Burton Albion have now sold out, with the... Read more

    The 12 February 2016 by   Bescotbanter
    SOCCER, SPORTS
  • Easy Valentine Craft for Toddlers

    Easy Valentine Craft Toddlers

    Valentine’s Day is this weekend, and it’s not a day restricted to lovebirds – everyone can join in the fun! If you have little kids at home, this is a great... Read more

    The 12 February 2016 by   Hemapriya Natesan

Magazine