Adding a Sliding Back to Top Button Widget to Blogger

Socialize It →

Tweet

7

Advertisements

Scrolling/Sliding Back to top Button widget will make your website more user friendly as it will directly take your user's to the top of the page smoothly.They don't need to scroll by them self with the help of mouse and sliding bar on right side.All they have to do is to click on a button and they will reach the top of the page it will not only safe the time of the user's but also make them comfortable and the compatibility of the website will be increased.Most of user would love this widget as they scroll back to top with lot of fun.so without wasting any much of time let us start working.adding it is as simple as writing A B C.

Adding A Sliding/Scrolling Back To Top Button Widget in Blogger.com

1.Go to Blogger.com >>Your Blog>>Layout>>Add A Gadget>>HTML/JavaScript

2.Now add the code which is listed below

Before Adding see the Preview of the widget     

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" >

/***********************************************

* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)

* Modified by www.MyBloggerTricks.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="Your 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 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>

Customization of the widget (Important) According to your Satisfaction:

Now you have to chose the image that you want to show as back to top,here are few images listed below just chose any one of the and replace it with Your Image Link 

Important:you only need to copy the url so don't copy the image just url and replace it with Your Image Link

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifX10us_px_EMsWYDkZhwdPwn_sPxVLTh9qSupqtSR17G1WIZt1RDGWLO18FkHCR4z1x6Zh7i7ViAILKqUAV0SbRDhE9tGAU5h7KcsFzJNrIMyOiNYidnZzkb8FVMv41h4KPIEHktqhcY/s400/Top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3RQTEx0AZhc5HfNmGX5u8XhJ0CE0Fgtkua8tXwelUgRcLjmcycJ3v8r16JluyDQTnn3Oqxa5MJna116fzKoKRouYT6sDr6ErbF38oUpBDHqKa6jFoMtmalJaP8Izq9lewi0yGc3zKOGk/s400/Back-to-top.png

http://lh6.ggpht.com/_7wsQzULWIwo/SgXYFxqlJTI/AAAAAAAABDM/P4obxU7eDUY/back-to-top-small-1%5B4%5D.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYBph-jCKa6i5ylb7pHS8VN5xf_Z77Wx4hKu2Vi969tVDAhhQyve_zJKHyp6-NmDPtyOMzxOFpRM-Rv3dkiX2o-sZL2jMhI3PKsPVedDcc8SDR-hSgYYtk__RFt_AOVHyCXb87AS3f0cFO/s1600/back-to-top-button.gif 

And after changing the your image link with the above listed urls just hit save button and your work is done

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).