.

Cara Membuat Tombol Back To Top Dengan Efek Lambat

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" >
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://1.bp.blogspot.com/-0GZVT1s8KaI/UMgg1K0FT4I/AAAAAAAABpI/NIAZPJeNp6w/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.

0 komentar:

Posting Komentar

> NO ~ Sara, Porno, Hujat, Provokasi, Hargailah Sesama.
> NO ~ Promo ( iklan ), Spam, Link Hidup, Akan Langsung Hilang
> Berkomentar Sesuai Topik Tidak OOT, Agar Kita Semua Bisa Berbagi.