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="http://lh6.ggpht.com/_7wsQzULWIwo/SgXYJAl0TcI/AAAAAAAABDc/_gSevr05V18/Up1Blue%5B9%5D.png" 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()

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="http://lh6.ggpht.com/_7wsQzULWIwo/SgXYJAl0TcI/AAAAAAAABDc/_gSevr05V18/Up1Blue%5B9%5D.png" 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...:)