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 :

  • Self-Transcendence 3100 Mile Race 2017 – Daily Updates – Day 4 – Alan Young

    Self-Transcendence 3100 Mile Race 2017 Daily Updates Alan Young

    Self-Transcendence 3100 Mile Race 2017 - Daily Updates - Day 4 ?Ray K was my houseguest as we were not required for "security " duties. ?About 1 am we reached... Read more

    The 22 June 2017 by   Abichal
    OTHER SPORTS, OUTDOORS
  • Summer Festival Preview: Tanglewood

    Summer Festival Preview: Tanglewood

    Another summer under the trees offers gods, rainbows and Mahler. by Paul J. Pelkonen The Koussevitsky Concert Shed at Tanglewood, guarded by a really big... Read more

    The 22 June 2017 by   Superconductor
    CULTURE, THEATRE & OPERA
  • What is The Death Gate and What Happens When It Opens

    What Death Gate Happens When Opens

    A mystery artist has created a puzzle to be solved in the form of The Deathgate... and it opens on 30 June. It's counting down right now! It may not seem obviou... Read more

    The 22 June 2017 by   Tomatrax
    ENTERTAINMENT, MUSIC
  • Reasons Why the UK is Better Than Ohio

    Reasons Better Than Ohio

    Well, I just felt like listing a few of the things that make the UK better than Ohio. The UK is twice as big as Ohio (242,900 sq.km versus 116,096 sq. Read more

    The 22 June 2017 by   Ravenswingthog
    DIARIES, SELF EXPRESSION
  • A Sense Of Possession In The Industry

    One of the things that I love about music is the sense of possession you get out of it. The fact that you can have a record that is your favorite record of all... Read more

    The 22 June 2017 by   Indiemusicpromo
    ENTERTAINMENT, MUSIC
  • Calling All Meat Lovers: Windy City RibFest Returns to Uptown

    Calling Meat Lovers: Windy City RibFest Returns Uptown

    Windy City RibFest in Uptown will be back again this year to dazzle your taste buds with melt-in-your-mouth slabs of meat and saucy concoctions. Read more

    The 22 June 2017 by   Urbanmatter Chicago
    TRAVEL
  • Tinted Glasses

    Tinted Glasses

    To enhance a casual look, tinted glasses are perfect to jazz up your look. This inspired look from the 70s has traced the surface yet again to give a comeback b... Read more

    The 22 June 2017 by   Chayanikarabha
    FASHION, LIFESTYLE, SHOPPING

Magazine