Widget Back To Top Efek Smooth Scrolling

proBlogiz

---

Membuat widget Back To Top dengan Efek Smooth Scrolling

Widget Back To Top tentu Anda sudah mengetahuinya, bukan? Sudah banyak sekali tutorial Blogger yang membahasnya, baik yang sedeharna hanya dengan membuat link anchor ke atas halaman (mengarahkan ke halaman atas blog) ada juga yang sudah menggunakan efek smooth scrolling  (dengan jQuery). Penggunaan script jQuery tentu lebih membuat fungsi tombol/button back to top lebih baik dan memberi kesan profesional di blog/situs Anda. Desain Blog kali ini juga tentang Cara Membuat widget Back To Top dengan Efek Smooth Scrolling, smooth scrolling ini berarti menggulung (bergulir) secara lembut/halus ke atas jika tombol diklik, tidak secara sekaligus.

Bagi Anda yang memiliki blog/situs  dengan konten yang banyak dan panjang, menambah widget Back To Top ini sungguh ide yang baik, Kawan. Dengan memberi kemudahan dan navigasi yang cepat bagi pengunjung, tombol kembali ke halaman atas ini adalah widget yang sempurna untuk blog Anda.

Buton/tombol Back To Top yang saya sharing ini, menggunakan script yang tidak rumit dan selain mempunyai efek smooth scrolling automatic (menggulung halaman otomatis secara lembut) juga efek fade in dan fade out (tombol akan muncul jika halaman telah discroll pada posisi tertentu kebawah halaman blog). Disamping itu script tersebut mudah diedit dan diganti seperti mengganti gambar ikon/tombol Back To Top, merubah ukuran gambar, mengganti teks attribut (Scroll Back to Top) dengan teks Anda sendiri. Oleh karena dalam artikel ini, saya juga telah menyediakan contoh-contoh image/gambar tombol Back To Top  dengan url-nya dibawah. (silahkan Anda pilih yang cocok)

Ok, now....langsung saja ke topik bagaimana cara membuat atau menambah widget Back To Top di blog ini, sebelumnya saya akan memulai dengan prinsip sederhana dari fungsi tombol back to top.

Pada dasarnya cara kerja fungsi link back to top ini sederhana, yaitu sebuah link yang menuju atau megarahkan pengguna ke halaman atas dari blog/website. Prinsipnya Anda bisa membuat tombol ini hanya dengan menggunakan kode sederhana dibawah ini :

<a href='#'>Back to Top</a>

Coba Anda klik link back to top dengan menggunakan contoh diatas:

Back to Top

Sebuah tag hyperlink yang memiliki nilai href="#", akan selalu menuju ke halaman atas situs. Pada dasarnya, setiap kali Anda membuat sebuah link kosong, maka link tersebut secara otomatis akan membawa Anda menuju ke atas setiap kali Anda mengkliknya.

Walaupun contoh diatas sangat sederhana, maka tentu kurang menarik dan hanya mengarahkan user keatas secara sekaligus karena memang tanpa menggunakan efek apapun (smooth scroll).

Maka sudah saatnya Anda memakai yang ini, fungsi back to top dengan smooth scrolling, caranya sangat mudah ikuti saja panduannya dibawah ini.

Cara Membuat/Menambah Widget "Smooth Scrolling Back To Top" di Blogger

• Masuk Blogger > pilih Tata Letak >
• Klik Tambah Gadget > pilih Add HTML/Javascript
• Copy semua kode dibawah, dan letakkan didalam kolom widget tersebut.

<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/AVvXsEjfn8LLvHdampgUhQi_tVjzhVoDW5ryvdS2JGRaAn83SX6P_ysE1rgJXirSeMdgV8CLZiYBenPntmWfadEn5WkNJ7uoNQxQ-GNRNfitqs0g8Nz__sOJXMrp4e7-VeY2UkdiayCA0zH7m0c/" width="32px" height="32px"/>', //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>

original code by : www.dynamicdrive.com
little modif by me

Kemudian Simpan.
Hasilnya ( sebagai DEMO) Anda bisa lihat tombol "Back to Top" di blog ini, pojok kanan bawah tampak ikon, coba diklik aja.

Kostum :

*Script jQery:

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

Anda bisa menghapus jQuery diatas jika template Anda sudah menggunakan jquery.min.

*Text 'Scroll Back to Top' ganti dengan teks Anda sendiri jika mau.

*Untuk URL gambar/ikon tombol "back to top" pada kode yang berwarna biru :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfn8LLvHdampgUhQi_tVjzhVoDW5ryvdS2JGRaAn83SX6P_ysE1rgJXirSeMdgV8CLZiYBenPntmWfadEn5WkNJ7uoNQxQ-GNRNfitqs0g8Nz__sOJXMrp4e7-VeY2UkdiayCA0zH7m0c/" width="32px" height="32px"/>

*Angka="32px" : adalah besar ukuran ikon, jika kurang besar Anda bisa rubah menjadi 48 atau 50, jangan terlalu besar (tampilanya jelek) max= 50px.
*Gantilah URL ikon dengan contoh gambar/ikon dibawah ini (atau dengan ikon Anda sendiri), jika Anda tertarik dengan  ikon-ikon dibawah ( klik kanan pada ikon yang Anda pilih kemudian pilih "copy image URL", kemudian gantikan kode ikon URL-nya)

---

---

Silahkan pilih salah satu ikon-ikon keren "back to top" diatas dan copy URL image, kemudian ganti url ikon yang ada di code Widget Back To Top diatas (yang berwarna biru)

Gimana Sob!! udah coba?
Silahkan di comment atau ada yang ga jelas, feel free to ask me......

Happy Blogging...:)