• Madjongke.com
  • Kontak
  • Facebook

Madjongke

Bacaan Santai Kehidupan Sehari-hari

  • Beranda
  • Cinta
  • Kehidupan
  • Kesetiaan
  • Wanita/Cewek
  • Cowok/Pria
  • Kendaraan
  • Lainnya
    • Kata-kata
    • Travel
    • Berita
    • Komik
    • Suami
    • Mertua
    • Resep Masakan
    • Anak
    • Kisah nyata
    • Mantan
    • Lain-lain
Beranda » blog » Membuat Tombol Back To Top Melayang Dengan Jquery

Membuat Tombol Back To Top Melayang Dengan Jquery

membuat tombol back to top jqueryCara memasang tombol back to top sudah saya berikan pada kesempatan yang sebelumnya. Dan sekarang madjongke akan memberikan hal yang serupa tapi tak sama. Bisa saya katakan tidak sama karena untuk yang ini hasilnya akan berbeda atau lebih baik dari sebelumnya karena ketika kita klik tombol tersebut, maka kita tidak akan langsung sampai di halaman atas sebuah web atau blog.

Untuk lebih jelasnya, ketika kita klik tombol tersebut maka tampilan akan kembali ke atas secara perlahan-lahan. Selain itu, tombol ini tidak akan terlihat sebelum pengunjung mengarahkan scrollnya ke bawah pada halaman web atau blog anda.

Jadi bisa dikatakan tombol back to top yang satu ini terlihat lebih keren dan juga lebih canggih. Mungkin contohnya bisa dicoba pada blog madjongke ini jika belum berubah atau hilang karena ulah saya sendiri.

Nah, jika anda sudah tidak sabar lagi menyimak caranya, mari kita sama-sama membaca cara yang sudah saya tuliskan dibawah ini.

Untuk membuat tombol melayang yang tadi dimaksud, pertama-tama tentu saja masuk ke blogger dulu kemudian edit template anda dengan memilih edit html.

Jika sudah, silahkan tempatkan kode css berikut ini pada tempatnnya bersama kode css yang lain.

#toTop {opacity:0.8;padding:5px;position:fixed; bottom:2px; right:5px;cursor:pointer;display:none}

Jika anda tidak tahu tempat mana yang tepat untuk peletakan kode seperti di atas, anda bisa menggantinya dengan kode dibawah ini di atas kode </head>.

<style type='text/css'>
#toTop {opacity:0.8;padding:5px;position:fixed; bottom:2px; right:5px;cursor:pointer;display:none}
</style>

Jika sudah, tempatkan kode berikut ini di bawahnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});

$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},10000);
});
});
</script>

Sebelum melanjutkan, sebaiknya cari dulu apakah ada kode <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script> sebelum ditambahkan kode diatas. Jika ada sebaiknya hapus kode tersebut.

Jika penjelasan diatas sudah bisa dimengerti, silahkan tempatkan kode berikut ini terserah anda mau meletakannya.

<div id='toTop'>
<a href="#"><img alt="Kembali ke atas" src="http://madjongke.yn.lt/madjongke.com-back-to-top.png" /></a>
</div>

Setelah itu simpan dan lihatlah hasilnya. Sekedar tambahan saja, untuk kode yang berwarna merah bisa anda atur sesuai selera untuk masalah kecepatannya. Selain itu, untuk kode yang terakhir anda juga bisa meletakannya pada widget HTML/JavaScript. Jadi kode pertama dan kedua dipasang terlebih dahulu kemudian disimpan. Selanjutnya tinggal memasukan kode terakhir pada widget html.

Itulah cara membuat tombol back to top menggunakan Jquery. Jika anda punya cara lain untuk masalah blog, silahkan membagikan pada blog anda sendiri atau disini juga boleh kepada yang lainnya jika tidak keberatan. Semoga bermanfaat.
Rohmad Nur Hidayat, Selasa, 14 Agustus 2012

Bagikan

#blog #Terbaru
Artikel Terkait
Lebih baru
Lebih lama
Beranda

10 Terpopuler

  • 10 Arti Kata Hmm Dari Wanita Saat Chat, Kamu Yang Mana?
    Penggunaan kata hmm sebenarnya digunakan untuk menunjukkan kondisi sedang berpikir. Seharusnya setelah menggunakan kata itu ada kalimat teru...
  • Cerita Cinta Terlarang Dengan Istri Orang (Nyata)
    ....Suaminya merantau untuk bekerja sehingga kami dengan leluasa menjalin hubungan. Dia begitu baik dan sangat dewasa hingga membuat aku ben...
  • 12 Kalimat Pengganti Untuk Tanya 'Sudah Punya Pacar Belum?'
    Dengan teman satu aktivitas saja kadang kamu tidak bisa mengetahui secara pasti dia punya pacar atau tidak, apalagi dengan orang yang belum...
  • Wajib Tahu, 7 Macam Sistem Dan Jumlah Komisi Makelar Mobil
    Berapa komisi makelar mobil?, sehingga tampaknya mereka sangat antusias menekuni profesi semacam itu. Hingga rela menghabiskan banyak waktu ...
  • 10 Kata-kata Halus Tapi Nyindir Orang Suka Nyinyir, Ghibah, Gosip
    Punya teman suka gosip, nyinyir, julid, dan sebagainya?. Atau bisa juga tetangga yang suka melakukan hal-hal tersebut dan sering bikin kupin...
  • Asal Usul Sejarah Panggilan Om dan Tante, Banyak Yang Salah Kaprah?
    Asal Usul Panggilan Om dan Tante? Lagi cari artikel yang membahas tentang itu yah? Pas banget nih! Artikel kali ini akan membahas secara khu...
  • 6 Arti Lain Dibalik Kata 'Ciee Ciee' Dari Seseorang Untukmu
    Dalam menapaki kehidupan Kamu tentu sudah tidak asing lagi dengan kata "ciee ciee". Ini bukan kata yang asing untuk Kamu dan memi...
  • 6 Ciri Orang Tidak Tahu Diri Dan Tidak Pantas Dibaikin, Ngelunjak
    Pernah kalian bertemu dengan orang yang tidak tahu diri?. Kalau kita baik padanya malah dimanfaatkan. Bahkan ketika kita berniat membantu, o...
  • 10 Kata Sindiran Untuk Orang Yang Suka Mencampuri Kehidupan Orang Lain
    Dalam kehidupan sehari-hari, kita sering dihadapkan dengan orang usil yang suka mencampuri urusan orang lain. Sepertinya ingin membantu, tap...
  • 8 Alasan Pria Mencium Wanita Yang Bukan Pacarnya
    Pria mencium wanita tidak selalu pacar. Kadang teman pun bisa menjadi sasaran ciuman. Biasanya dalam mencium, pria melakukan secara mendadak...
Beranda | Tentang | Kontak | Privacy Policy | Syarat Dan Ketentuan | Sitemap
Copyright © 2012-2022 Madjongke - All Rights Reserved
Powered by Blogger