Repost dari artikel saya di PC Mild 20/2010
Kombinasi antara javascript dengan CSS mampu menghasilkan tampilan website yang semakin menarik. Salah satunya adalah membuat tombol atau icon yang mengambang di bagian samping website, seperti pada http://mashable.com dan http://erikvandeven.com.

Tampilan floating button pada mashable.com
Kunci utama dari pembuatan tersebut terletak pada property CSS yang digunakan beserta struktur dokumen html-nya. Agar tombol (button) yang semula terletak tetap dapat ikut bergeser ke bawah seiring berjalannya scroll vertical pada browser, maka harus ditambahkan sedikit pemrograman javascript di dalamnya. Untuk lebih mudahnya, pada tutorial ini akan menggunakan library javascript yang sudah cukup terkenal dan banyak digunakan, yaitu jQuery. Untuk mendapatkan library ini, dapat didownload pada website resminya http://jquery.com.
- Langkah paling awal adalah membuat struktur layout html untuk halaman dengan button mengambang tersebut. Berikut ini adalah contoh layout html sederhana dengan header, content, dan footer. Lokasi div dari button umumnya diletakkan pada content, agar koordinat vertical awalnya sejajar dengan content.
Posisi button adalah relatif, sehingga tidak akan berubah berapapun resolusi monitor yang digunakan. Perlu diketahui juga bahwa
float-button-wrapper
tidak boleh dihilangkan. Bagian ini akan mencegah menu agar tidak berpindah ke posisi absolut sebelah kiri website. Jika ingin mengetahui perbedaannya, Anda bisa mencoba menghilangkannya setelah seluruh aplikasi jadi.Setelah itu, barulah di dalam
float-button-wrapper
akan diisi denganfloat-button-page
yang menyimpan seluruh icon yang ada.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" media="all" charset="utf-8" href="style.css" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/float.js"></script> </head> <body> <div id="wrapper"> <div id="header">Ini adalah header berukuran 700px x 300px</div> <div id="content"> <div id="float-button-wrapper"> <div id="float-button-page"> <a href="http://www.facebook.com"><img src="images/fb.png" alt="Facebook" /></a> <a href="http://www.twitter.com"><img src="images/twitter.png" alt="Twitter" /></a> </div> </div> Ini adalah content berukuran 700px x 2000px </div> <div id="footer">Ini adalah footer</div> </div> </body> </html>
- Langkah berikutnya adalah mendefinisikan style yang digunakan. Untuk lebih mudahnya, style diletakkan pada file terpisah. Pada style ini, terdapat class fixed yang menjadi kunci utama untuk membuat button yang semula absolut menjadi ikut bergerak ke bawah. Berikut ini adalah contoh style sederhana yang digunakan.
Perhatikan dan pahami bagian
float-button-wrapper
danfloat-button-page
secara mendalam. Perhatikan juga bahwa bagian yang diberi classfixed
adalahfloat-button-page
dan bukanfloat-button-wrapper
.body { margin: 0; padding: 0; } #wrapper { width: 700px; margin: auto; border-left: dashed 1px #888888; border-right: dashed 1px #888888; background: #cccccc; } #header { width: 100%; height: 300px; background: #999999; } #content { width: 100%; height: 2000px; background: #555555; position: relative; } #float-button-wrapper { position: absolute; left: -120px; } #float-button-page img{ background: none; border: none; padding: 0; margin: 0; } #float-button-page a { float: left; clear: left; margin-bottom: 10px; } #float-button-page { position: absolute; background: #ccffcc; } #float-button-page.fixed { position: fixed; top: 20px; }
- Langkah terakhir adalah menambahkan javacript dengan jQuery. Sebelum melakukan scrolling, perlu dilakukan pengecekan apakah browser yang digunakan adalah IE6. Jika memang menggunakan IE6, maka scrolling dibatalkan. Sebab IE6 tidak mengenal property
fixed
untuk sebuah elemen.Jika bukan IE6, maka dilakukan pengambilan lokasi button bagian atas yang kemudian disimpan dalam variable “top”. Kemudian jQuery akan mem-bind event scroll yang terjadi. Jika posisi vertical scroll lebih besar dari variable top tadi, maka akan ditambahkan class
fixed
yang membuat button dapat mengambang mengikuti scroll. Jika tidak, maka hilangkan classfixed
tersebut.jQuery(document).ready(function() { var msie6 = $.browser == 'msie' && jQuery.browser.version < 7; if (!msie6) { var top = $('#float-button-page').offset().top - parseFloat($('#float-button-page').css('margin-top') .replace(/auto/, 0)); $(window).scroll(function (event) { // di mana posisi Y var y = $(this).scrollTop(); // apakah di bawah floating button if (y >= top-20) { // jika ya, tambahkan class fixed $('#float-button-page').addClass('fixed'); } else { // jika tidak, hilangkan $('#float-button-page').removeClass('fixed'); } }); } });
- Setelah seluruh langkah telah dilakukan, maka selesailah proses pembuatan floating button pada website. Anda bisa mencobanya langsung pada website Anda sendiri. Selamat mencoba.

Hasil floating button buatan sendiri
Download source code keseluruhan.Artikel ini telah dipublikasikan di media cetak tabloid PC Mild edisi 20 tahun 2010 lalu.
Makasih sudah berbagi ilmu. Salam silaturahmi.
Salam persohiblogan
Maaf baru posting dan blogwalking lagi nih
Makasih atas ilmunya sobat
salam persohiban juga.. monggo2.. silahkan dicoba.. hehe.. 🙂
keren nih jquery, eh bro ada tugas hiburan, mau ya?
http://adecheeruna.wordpress.com/2011/02/15/pekerjaan-rumahlagi/comment-page-1/#comment-1992
Trim’s ya 😀
wah, telat nih baca komennya, soalnya udah berangkat merantau pas itu. tugas hiburan apaan? gak nemu info apa-apa di link-nya.. -_-
nice info 🙂
salam kenal,
newbie bloggerngalam
salam kenal juga..
wahh sob klo di wp gmna yakh ..?
hmnn
mampirr dunkk di
http://www.archivezt.com/maximalkan-secret-key-pada-wp-config-php
ya tinggal main2 css di theme-nya aja..
mas…aq minta ijin ngopy source template ini ya… 😀
tp ga aq bkin sm kq…
cuman aq pake gambar2nya aja…. (^_^)v
ok, silahkan saja selama bermanfaat.. 🙂
keren tuh j query nya
tapi klo bisa pakek java script soalnya disuruh sama dosen harus pakek java script
(mbuat tugas hehe :P)
lah, jQuery kan javascript. pernyataan yang aneh tuh.. bilang aja ini pakai library javascript pak, daripada bikin dari nol.. pasti pak dosen lebih terkesima.. haha..
bagus banget blognya
bagus blogny..
ganteng pulaa yang poenya..hehe
thanks buat pujian terhadap blognya.. pujian terhadap yang punya itu ganteng, hanya bisa diterima bila yang muji itu cewek.. sekian.. *tutup tab*