Back to Top button or link is a link that sends your viewer to the top of page once clicked. This will help your readers navigate better, especially so if you have long pages.The best thing about this button is that it appears only when the user scrolls down the page and disappears as he scrolls up.We have kept the installation process a one step process. So that you can easily add this widget to your blog.


How To add scroll to top button to blogger?


  1. Go to Blogger > Design.
  2. Click add a Gadget > HTML/JavaScript.
  3. Paste the code and save it.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" >
/*********************************************** 
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) 
* Modified by www.helperblogger.com 
* This notice MUST stay intact for legal use 
* Visit Project Page at http://www.dynamicdrive.com for full source code 
***********************************************/
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://4.bp.blogspot.com/-mwSVtgAlvsI/T1uawwxUkWI/AAAAAAAABFs/iU9OdqgUQkE/s1600/hb-arrow-up.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
    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 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() 
            }) 
        }) 
    } 
}
scrolltotop.init()
</script>


If you want to use your own image then just change the highlighted URL.
If you have any questions on how to adjust the position and fade duration then please let me know.I'll glad to help you....

Post a Comment

  1. How much time delay it will add to the loading of the site?

    ReplyDelete
  2. Approximate 1-2 seconds. We can't tell the exact time delay....

    ReplyDelete
  3. hello.
    Why when i click on arrow not scoll up?
    And how to move arrow to center of page?
    Thanks1

    ReplyDelete
  4. @CV GroupLinks - Can you provide your blog URL.
    and How do you align the arrow to center vertically center or horizontally center ?

    ReplyDelete
    Replies
    1. here http://castlevillegrouplinks.blogspot.com/ see arrow icon under "share plugin".
      I want to move icon center horizontally.
      tnx. for reply!
      And if you check my page pls help me with recent posts trick,no auto scroll.

      Delete
  5. Thanks for giving me the code. I had made some images. Plz check this : The UP Style scroll back top buttons for blogger - http://www.netinfozblog.in/2012/06/35-up-style-scroll-back-to-top-buttons.html

    ReplyDelete
  6. thanx....here u can see scroll up logo


    http://technology-solutionzz.blogspot.in

    ReplyDelete
  7. I have try for it,the scroll button already appears on my blog,nut why in the widget sidebar appears "no image" box?

    http://www.advantoday.com/

    ReplyDelete
  8. The problem was solved,thanks for this awesome tips ! :D

    ReplyDelete
  9. its kool. so simple.. is there any app for gng down??? thanks dude..great wrk

    ReplyDelete
  10. Thanks It Works Great And Can It Be More Customized

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. Thanks. God Bless you! The problem was solved. Great work!!

    ReplyDelete
  13. How do i move the arrow to horizontal center ?

    Http://www.virtualpounce.com

    ReplyDelete
  14. Thank you so much - worked first time...
    As a new clumsy developer people like you are a blessing.

    ReplyDelete
  15. hy dear rahul please tell me i want to add this in left corner of my blog instead to right....how can i do this....

    ReplyDelete
  16. its good ..
    thx My frind

    www.seetechnol.com

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top