Thursday, October 31, 2013

How To Add Smooth Scrolling "Back To Top" Button

at 6:33 PM
12 Comments

Back To Top
How to add smooth scrolling back to top button for website & blogger. Animated back to top button in blogger/website is one of the best Jquery style animated widget that looking good and also visitors enjoy easy site navigation scroll to top.

The best thing about this button is that it appears only when the user scrolls down the page and disappears as he scrolls up, and also one more feature of this script you can add your own image that you like.

Scroll this page to Bottom and See Demo at bottom right

How to Add Smooth Scroll to Top with Jquery ?


1. Go To Blogger > Layout
2. Add a Gadget Choose HTML/JavaScript widget
Paste the following code inside it

JQuery Code. if you can already add jquery plugin into your website or blog then skip first code. and if you not add already then add this code with scroll to top script.
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js' type='text/javascript'></script>
Scroll to Top Code.

<script type="text/javascript">
var scrolltotop={
//Modified by bloggerknown.blogspot.com more JQuery Scroll to Top Design
//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="IMAGE LINK" />', //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 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>

Replace IMAGE LINK with the image link of your back to top button.we have collect some of back to top button you can also get here. If you want to add image link then right click the buttons below and select "Copy image location" and add this link:

Collection of Back to Top buttons.

back to topback to topback to topback to topback to topback to topback to topback to top
back to topback to topback to topback to topback to topback to topback to topback to top
back to topback to topback to topback to topback to topback to topback to topback to top

3. Save the widget and drag it near the footer or any bottom position.
4. View your blog to see the magic.

I hope this little trick work on all, if any problem then post comments for help others. share with frineds :D
Get Free Updates:

12 comments:

  1. Great Tut. Please Visit My Blog
    http://top10templates.net

    ReplyDelete
  2. I love the collection of back to top buttons, can I use one of them on my blog?http://www.smtutorial.com

    ReplyDelete
  3. Great Tut. bro, I have also created a Back To Top Button for Blogger With One click Installation don't need to edit Template. i hope you Like it.

    ReplyDelete
  4. Great W#idget but it is working in the home page only
    Visit.. http://www.couponlelo.in/
    Help me???

    ReplyDelete
    Replies
    1. Hi CouponLelo thank you for like this script, i visited your site and found JQuery script only in home page and doesn't found JQuery in post pages so please add jquery code in post pages. Thanks

      <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js' type='text/javascript'></script>

      Delete
  5. Dear Sir,
    This coding is not working on my godaddy website builder.... what should i do????

    ReplyDelete
  6. Dear Sir,
    This coding is not working on my godaddy website builder. What should i do???
    I have pasted this code on www.rajkumaridesire.org/pp2.html
    Plz check it out & tell some solution.

    ReplyDelete
  7. Not working :( .. followed the instructions but nothing happened, tested in chrome and mozila but it doesn't appear, please tell me what to do?

    ReplyDelete

Your feedback is always appreciated. we'll try to reply to your queries as shortly as time allows.

Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please don't spam Spam comments will be deleted immediately upon our review.

Regards,
Mohammad Azeem