Membuat Smooth Scroll Back To Top untuk Blogger

Membuat Smooth Scroll Back To Top untuk Blogger

Blog masdim - Jika blog Anda memiliki template yang memanjang ke bawah tidak ada salahnya jika menggunakan tombol navigasi smooth scroll back to top. Kegunaan tombol ini sama seperti tombol back to top pada umumnya yaitu memudahkan pengunjung melihat kembali artikel di atas, hanya saja yang membedakan adalah cara menggulung ke atas.

Apabila Anda menggunakan tombol smooth scroll back to top ini cara menggulungnya akan lebih lembut ketimbang menggunakan tombol back to top biasa karena tombol smooth scroll back to top ini dilengkapi dengan jquery. Tombol ini tidak otomatis muncul ketika pengunjung melihat blog Anda, akan tetapi tombol ini baru muncul jika pengunjung menggeser scroll hingga ke bagian bawah blog Anda, sehingga berfungsi dengan semestinya.

Untuk menambahkan tombol smooth scroll back to top fade in fade out pada blog Anda, tambahkan sebuah gadget HTML/Javascript kemudian masukkan kode dibawah ini :

    <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/AVvXsEiRTx7F9BfktM4gwKSB8roaqICG831YHC5JjTuu7gEQNmKXAGgv6i_cOKyDH-MAI77sWF70Ql1J21sEezch-a8n_H4XWzlng2wVWwwvcxt0nlfffFxdTMcDsC9N9OCc3x-aPTuxXbhCrvc/s400/Back-to-top.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"

    controlattrs: {offsetx:5, offsety:5}, //jarak ke kanan / bawah

    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:'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>

Catatan :

 -   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRTx7F9BfktM4gwKSB8roaqICG831YHC5JjTuu7gEQNmKXAGgv6i_cOKyDH-MAI77sWF70Ql1J21sEezch-a8n_H4XWzlng2wVWwwvcxt0nlfffFxdTMcDsC9N9OCc3x-aPTuxXbhCrvc/s400/Back-to-top.png adalah URL gambar panah pada navigasi, Anda bisa menggantinya dengan gambar yang Anda sukai.

-    title:'Back To Top' adalah judul ketika kursor digeser ke atas gambar panah pada navigasi akan muncul tulisan Back To Top, Anda bisa mengganti dengan tulisan yang Anda inginkan.

Akhir kata, selamat mencoba dan happy blogging :)

Subscribe to receive free email updates: