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


You Might Also Like :

Back to Featured Articles on Logo Paperblog

These articles might interest you :

  • Shilo Sanders- Son Of Deion Sanders Thanks Courts For Allowing Him To Live With...

    Shilo Sanders- Deion Sanders Thanks Courts Allowing Live With Pilar

    ChristianNews Shilo Sanders, the son of NFL Hall of Famer,  Deion Sanders took to twitter to “thank” the courts for allowing him to live with his mother, Pilar... Read more

    The 04 August 2017 by   Firstladyb
    SPIRITUALITY
  • “I Feel Great”

    Feel Great”

    Jakub went to his doctor's office believing that he had a back injury, but returned with a chocking diagnosis instead. He had type 2 diabetes - in spite of... Read more

    The 04 August 2017 by   Dietdoctor
    DIET & WEIGHT
  • July Allotment Recap (2/2)

    July Allotment Recap (2/2)

    Sunday afternoon saw us return bravely to 24a even though there were more thundery showers foretold by the weatherman. I will admit that I guffawed at the... Read more

    The 04 August 2017 by   Chrryblossomtat2
    GARDENING, HOME
  • Culinary Delicacies in Croatia- What to Eat and Drink in Croatia

    Culinary Delicacies Croatia- What Drink Croatia

    In my earlier post, we spoke about how Croatia is a stunning European destination, let us now see what are the culinary delicacies in Croatia or what you can... Read more

    The 04 August 2017 by   Kash Pals
    FOOD & DRINK, A-CLASSER
  • #Golf Training Aids Spotlight: The Delta Putt

    #Golf Training Aids Spotlight: Delta Putt

    Do you consider yourself to be a strong putter or do you feel you could improve your make percentage on the green? Most amateurs could use help with the flat... Read more

    The 04 August 2017 by   Golfforbeginners
    GOLF, SPORTS
  • Three Incredible Hikes in Southern Iceland3 Min Read

    Three Incredible Hikes Southern Iceland3 Read

    Nature takes center stage in Iceland, where there's a stunning view around every bend: massive glaciers, expansive lava fields, powerful waterfalls, black sand... Read more

    The 04 August 2017 by   Healthytravelblog
    TRAVEL
  • What I Wore: Daytime Pajamas

    What Wore: Daytime Pajamas

    Pajama top: ELOQUII (14) | Pajama pants: ELOQUII (14) | Shoes: ASOS (similar) | Earrings: J. Crew ( same in different colors, similar concept in same color) |... Read more

    The 04 August 2017 by   Wardrobeoxygen
    FASHION, SELF EXPRESSION, SHOPPING

Magazine