• Madjongke.com
  • Tentang
  • Sitemap
  • Kembali Ke Atas
  • rohmadjongke@gmail.com

Madjongke

Tips cinta, Kecantikan, Wanita, Dll

  • Madjongke.com
  • Cinta
    • Mantan
    • Kesetiaan
    • Kata-kata
  • Kecantikan
    • Tubuh
    • Wajah
    • Kulit
    • Rambut
  • Kisah Nyata
  • Kehidupan
  • Wanita
    • Suami
    • Mertua
  • Cowok
  • Komik
madjongke Tips
7 Cara Meninggikan Badan Meski Melebihi Batas Usia
madjongke Cowok
Selain Wajah Cantik, Cowok Suka Cewek Dengan 6 Tipe Wajah Ini
madjongke Chat
Sering Chatting Sama Pacar, Pasti Alami 15 Hal Ini
madjongke Zodiak
12 Ramalan Zodiak Terlengkap (Watak, Asmara, Masa Depan, Dll)
  • Privacy Policy
  • Syarat Dan Ketentuan
  • Rss Feed
  • Kirim Artikel
  • Tips Blog
  • Anak
  • Resep Masakan
  • Lain-lain
Madjongke.com » blog » Membuat Tombol Back To Top Melayang Dengan Jquery

Membuat Tombol Back To Top Melayang Dengan Jquery

Loading...
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.


Bagikan ke

Facebook Twitter
Dipublikasikan oleh Rohmad Nur Hidayat, Selasa, 14 Agustus 2012
Loading...

Artikel Terkait: blog


Terbaru

7 komentar untuk "Membuat Tombol Back To Top Melayang Dengan Jquery"

  1. Jane Doe14 Agustus 2012 03.07

    back to top ente error sob, masa udah di klik. terus nggak bisa dikebawahin lagi.

    BalasHapus
    Balasan
    1. Rohmad Nur Hidayat14 Agustus 2012 04.07

      Bisa tapi harus nunggu selesai sampai atas dulu. Kalau masih jalan gak bisa. Jadi solusinya biar cepat angka yang sudah ditandai dengan warna merah itu dikecilin jadi 700, 800, atau angka lain yang menurut sobat sesuai.

      Hapus
      Balasan
        Balas
    2. Balas
  2. Marizka Zuverzeck14 Agustus 2012 09.17

    Salam blogwalking ja deh,..
    Salam knal ya gan,..
    :)

    BalasHapus
    Balasan
    1. Rohmad Nur Hidayat14 Agustus 2012 15.14

      Salam kenal

      Hapus
      Balasan
        Balas
    2. Balas
  3. Cyber4rt24 Desember 2012 14.04

    Silakan SUBMIT artikelnya di http://www.cyber4rt.com
    It's free and boost your traffic ;)

    BalasHapus
    Balasan
      Balas
  4. Crecester8 Maret 2013 21.36

    maksih sob

    BalasHapus
    Balasan
      Balas
  5. Kedai Ace Maxs2 Maret 2015 09.37

    Thanks infinya ka :)

    BalasHapus
    Balasan
      Balas
Tambahkan komentar
Muat yang lain...

Posting Lebih Baru
Posting Lama
Beranda
Langganan: Posting Komentar (Atom)

Kisah Nyata

  • Aku hanya tamu untuk anakku
  • Sahabat memaksaku untuk memiliki istrinya
  • Karena ktp aku terpenjara oleh suami orang
  • Pengakuan Wanita Korban Poligami
  • Izinkan aku menikahi janda
  • Terjebak Cinta Dengan Pria Beristri
  • Lihat Lainnya

Populer

  • 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 kup...
  • 20 Kata-kata Motivasi Sedih Cinta Tak Direstui Orang Tua
    Sudah sama-sama sayang dan ada keinginan kuat untuk melanjutkan hubungan menuju pernikahan, sayangnya orang tua atau pihak keluarga tidak ...
  • 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, t...
  • 10 Kata-kata Untuk Yang Sering Dihina/Diremehkan Karena Kekurangan
    Semua orang pasti punya kekurangan dan kelebihan masing-masing, termasuk kamu sendiri. Tapi tidak jarang kekurangan kamu sering dijadikan ba...
  • 20 Kata Sindiran Untuk Pelakor Paling Menusuk
    Banyak perasaan negatif yang tercipta ketika suami direbut oleh wanita lain. Kalaupun suami merupakan sosok yang sangat payah, minimal ada...
  • 20 Cara Supaya Tidak Terlalu Mencintai Seseorang
    Sesuatu yang berlebihan memang tidak baik, termasuk dalam mencintai seseorang sebaiknya dalam kadar yang biasanya saja. Sebab ketika kita ...
  • 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 te...
  • 10 Kata-kata Sindiran Karena Pacar Malu Mengakui Kita
    Kita memang butuh kata kata sindiran karena dengan bertanya pasti Pacar punya alasan lain untuk dijadikan alibi. Padahal hubungan yang dij...
  • Kata-kata Untuk Yang Sering Jadi Bahan Omongan Orang
    Karena diawali oleh dugaan yang belum tentu benar, kadang banyak pihak yang meyakini bahwa hal itu benar. Kemudian menjadikan hal itu menjad...
  • 25 Kata-kata Terima Kasih Suami Untuk Istri Dan Sebaliknya
    Sebagai ucapan terima kasih dari istri untuk suami atau sebaliknya, memang kadang perlu diberikan dengan bentuk kata-kata romantis. Tujuan...

Pemberitahuan Email

Pemberitahuan Artikel Terbaru

Copyright © 2012-2018 Madjongke - All Rights Reserved
Powered by Blogger