Cara Membuat Tombol Back To Top Dengan Efek Lambat

       SHADOWS || Cara Membuat Tombol Back To Top Dengan Efek Lambat, tentu para sobat pemula akan sedikit kurang paham, Nah Pada kesempatan kali ini saya akan berbagi kepada sobat tentang Bagaimana Membuat Tombol Back To Top Dengan Efek Lambat pada blogspot. Keren bukan jika di pasang di blog sobat.. pasti keren dong karena tombol ini mempunyai efek yang lambat seperti di blog saya ini. 

Apa gunanya Bagaimana Cara Membuat Tombol Back To Top Dengan Efek Lambat ini?

Salah satu kegunaan dari tombol back to top yakni untuk memudahkan pengunjung blog untuk kembali ke menu header atau navigation tanpa harus melakukan scroll pada mouse.

Tutorial untuk pemasangan back to top kali ini yakni menggunakan JQuery versi 1.3.7 (terbaru untuk saat ini). Cara pemasangannya tidaklah rumit dan tanpa harus mengedit CSS template blog, tetapi hanya dengan menambahkan gadget baru (HTML/Javascript) dan memasukkan kode ke dalamnya. Jika sobat penasaran seperti apa tombol back to top yang saya maksudkan lihat dibawah kanan blog saya disini, Bagaimana, menarik bukan...???

Nah jika sobat tertarik untuk memasang tombol to top seperti pada blog saya ini, berikut uraian singkatnya :

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

<script type="text/javascript" >

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIE5s8vT8pJFWkOY7JtVs1GN5Z0ZVGHwKatJr1WPDXoWRU6E0yQQnQR_Tm84c7b7AvJh-tTeW6Uo9hPzX5IN_iXNPirY3c2YaiNnvatJobdpQIJoES3h9ljFeEQbdrT8FDVCMs7PDZe_9X/s1600/navigate-up-icon.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>

NB:
URL yang saya beri warna merah di atas adalah url foto yang sudah diuplaod sebelumnya, silahkan dengan url foto sobat. ( punya tidak sobat gambar yang lain )??? Jika tidak punya comment ok.

Save template.

Selesai sudah Cara Membuat Tombol Back To Top Dengan Efek Lambat di blog sobat, semoga bermanfaat bagi sobat semua.