Home » Blog » Tips » widgets » Back To Top Button V2 [perlahan]

Back To Top Button V2 [perlahan]

Seperti yang kita ketahui dari Back To Top Button V1, Back To Top Button / Tombol Kembali Ke Atas adalah tombol yang berfungsi untuk kembali ke halaman paling atas. Sehingga apabila visitor atau pembaca blog kita ingin kembali keatas tanpa scroll sendiri, mereka dapat mengklik dan otomatis akan naik ke atas.

Widget ini juga tidak membutuhkan reload saat di klk sehingga tidak menghancurkan mood pemaca saat meng-klik tombol tersebut. Satu lagi, widget ini akan selalu ada di posisi yang telah kita tentukan walaupun kita memindah posisi widget Back To Top Button / Tombol Kembali Ke Atas di Edit Tata Letak.

Namun, kali ini berbeda dengan Back To Top Button V1, kali ini back to top button yang akan kita buat bakalan bergerak ke atas secara perlahan, jadi semacam naikin sendiri. Sayangnya, tips yang satu ini memiliki kelemahan yaitu load yang lebih lama daripada Back To Top Button V1.

Langsung saja, ini dia Cara Membuat Back To Top Button / Tombol Kembali Ke Atas [perlahan]:

Buka draft.blogger.com
Login menggunakan akun kalian
Pilih nama blog yang akan di beri Back To Top Button
Masuk Tata Letak - Tambah Widget - HTML/ Java Script
Copy Paste kode di bawah ini

<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="URL GAMBAR BACK TO TOP BUTTON" />', //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>

URL GAMBAR BACK TO TOP BUTTON diganti dengan URL gambar kalian
Simpan!!

Selesai, semoga cukup membantu. Terimakasih.

Jika Anda ingin berlangganan artikel Via Email,Ketik email Anda di bawah ini:

Artikel Terkait: Back To Top Button V2 [perlahan]

Comments

1 Comments

{ 1 komentar... read them below or add one }

Abang Menaip said...: Terima Kasih Ya atas informasinya.. Silahkan kunjungi blog saya :); 26/2/13