Tombol scroll back to top auto hide

Javascript jQuery

Penggunaan tombol ini sebenarnya untuk memudahkan ketika telah selesai menggulung ke bawah maka dengan menekan/klik tombol ini halaman akan otomatis tergulung keatas tampa pengunjung bersusah melakukan penggulungan keatas. kali ini saya akan berbagi untuk membuat tombol scroll back to top yang otomatis keluar ketika halaman di gulung saja, dan akan kembali disembunyikan ulang ketika halaman telah sepenuhnya kembali keatas/seperti semula ketika halaman tidak di gulung demo lihat di blog ini. trik ini berguna supaya pengunjung anda tidak melihat tombol yang selalu melayang dan terlihat aneh...

Langsung saja ikuti trik berikut ini, kita akan membuat batasan scrolltop seperti berikut:

$('#tombol-atas').click(function() {
    $('html, body').animate({scrollTop:0}, 900);
    return false;
}); 

perhatikan: Saat tombol kembali-ke-atas diklik, animasikan nilai scrollTop menuju 0 dengan durasi selama 900ms

diatas ini merupakan kode dasar, yang sebenarnya sudah bisa digunakan namun tombol back to top belum di sembunyikan secara otomatis yang mungkin sedikit mengganggu karena terus melayang di bawah halaman.

Selanjutnya kita akan membuat script yang menjadikannya tombol back to top otomatis tersembunyi ketika halaman masih dalam posisi semula dan belum digulung,

$(window).scroll(function() {
    if($(this).scrollTop() > 300) {
        $('#tombol-atas').show();
    } else {
        $('#tombol-atas').hide();
    }
});

ini adalah jika scroll/gulungan belum dilakukan hingga pada batas yang telah ditentukan maka tombol back to top tidak akan dijalankan/disembunyikan. dan jika halaman telah mencapai batas ukuran lebih dari 300 maka tombol akan di munculkan/jalankan dan sebaliknya terus menerus. hasilnya dua kode diatas seperti berikut:

$(window).scroll(function() {
    if($(this).scrollTop() > 300) {
        $('#tombol-atas').show(); //lihat jika jarak diatas 300
    } else {
        $('#tombol-atas').hide(); //sembunyikan jika jarak di bawah 300
    }
});

$('#tombol-atas').hide().click(function() {
    $('html, body').animate({scrollTop:0}, 900); //kecepatan scroll top 0 saat diklik durasi 900ms
    return false;
});

Untuk memambah efek agar telihat lebih bagus, Anda bisa menerapkan efek-efek umum JQuery seperti fadeIn() dan .fadeOut(), .slideDown() dan .slideUp() atau Anda juga bisa menciptakan efek animasi sendiri. Di tombol back to top ini menggunakan efek .fadeIn() dan .fadeOut():

Sekarang menerapkannya ke template anda, copy kode dibawah ini:

<a href='#' id='tombol-atas' title='Menuju keatas'>
    <img src='url-gambar-tombol-anda'/>
</a>

Letakkan dalam element wrapper template anda/dibawah footer, jangan lupa untuk memberi gambar tombol anda. anda juga bisa membungkusnya dengan element id/class tertentu yang anda inginkan.

Lalu tambahkan css berikut:

#tombol-atas {
  position:fixed !important;
  position:absolute; 
  bottom:10px;
  right:10px;
  z-index:999;
} 

dan langkah terakhir, silahkan letakkan kode jQuery ini dibawah HTML nya

<script>
$(window).scroll(function() {
    if($(this).scrollTop() > 300) {
        $('#tombol-atas').fadeIn();
    } else {
        $('#tombol-atas').fadeOut();
    }
});

$('#tombol-atas').hide().click(function() {
    $('html, body').animate({scrollTop:0}, 900);
    return false;
});
</script>

Jangan lupa simpan perubahan, dan lihat hasil dari pekerjaan anda.

Semoga berguna...

Artikel Terkait

  • Syntax Highlighter sederhana
    Apa itu Syntax Highlighter? para blogger seringkali berbagi script atau potongan kode untuk pembaca atau siapapun yang membutuhkannya untuk pengembangan dan tampilan web atau blog. Kebanyakan menggunakan blockquote sebagai "bidang pembungkus" dari script atau potongan kode tersebut dan menandai dengan beberapa warna khusus sebagai indikator at…
  • Daftar Isi Blog Tampilan Dinamis dengan jQuery
    Jika sebelumnya kita membahas daftar isi otomatis jquery navigasi maka sekarang kita coba membuat 'Daftar Isi Blog' dengan tampilan dinamis accroding dapat menggunakan jQuery seperti gambar di atas. Caranya gampang sobat Blogger, ikuti petunjuk berikut: 1. Login ke akun blogger anda 2. Pilih Entri Baru/Buat laman baru atau bisa menambahkan di…
  • Cara membuat efek loading menggunakan ajax
    AJAX bukanlah bahasa pemrograman baru, tapi cara baru bagaimana menggunakan standar yang ada. AJAX adalah seni bertukar data dengan server, dan memperbarui bagian-bagian dari suatu halaman web - tanpa reload seluruh halaman. AJAX dibuat pada tahun 2005 oleh Google, dengan Google Suggest. Google Suggest menggunakan AJAX untuk membuat antarmuka…
  • Modifikasi Alert Emoticon
    Saya telah membuat postingan Emoticon komentar otomatis namun pada postingan dahulu itu tidak ada modifikasi pemberitahuan pada saat emoticon tersebut di klik yang mana tampilannya masih menggunakan tampilan alert default. Demo Dan pada postingan saya kali ini saya akan membagikan cara modifikasi tampilan alertnya sesuka hati kita agar t…
  • Nivo Slider, jquery slider dengan 9 efek transisi
    Saya ingin memperkenalkan Nivo Slider jquery kepada Anda. Ini plugin Jquery mengagumkan untuk slider dengan 9 efek transisi yang unik, dan terlihat sangat profesional seperti slide show Flash. Salah satu slider yang paling mengesankan yang pernah saya lihat. Demo Bagaimana tentang efek? Keren? Plugin ini telah diuji untuk sebagian besa…
  • Membuat tooltip sederhana menggunakan jQuery
    Sebenarnya ada banyak cara untuk membuat tooltip, tidak hanya satu trik saja yaitu bisa dengan pseudo elements, dengan gaya CSS3 juga dengan javascript. Tooltip merupakan tampilan informasi berupa teks maupun gambar yang tampil saat cursor di arahkan (mouse over) pada sebuah item (biasanya pada link) dalam sebuah website/blog. Untuk kali in…

2 komentar

  1. wah Lumayan rumit juga kode-kode nya bagi yang pemula seperti saya hhehe. Hmmm keren juga action scriptnya.

    BalasHapus
Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...