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

Loading...

Editor oleh Rohmad Nur Hidayat

Bagikan ke

Facebook Twitter

Artikel Terkait: blog


Terbaru

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

  1. Ilham Bachtiar14 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. San Sinichi14 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. Em Albar8 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

  • 12 Ramalan Zodiak Terlengkap (Watak, Asmara, Masa Depan, Dll)
    Astrologi adalah suatu ilmu yang mempelajari watak dan perilaku Manusia berdasarkan planet-planet. Kebanyakan Orang menyebut dengan Ramalan...
  • Kisah Cinta Terlarang Om Dan Keponakan (Nyata)
    Kisah ini benar-benar dialami Oleh teman Madjongke.com sendiri. Sebut saja namanya Ida, Ida merupakan Wanita dari Kota A dan punya Paman (ad...
  • 7 Tanda Orang Yang Mudah Diajak Selingkuh
    Ada orang yang sangat setia pada pasangannya, suami, pacar, istri, kapanpun, dimanapun, dalam keadaan apapun. Begitu juga dengan orang yang ...
  • 6 Arti Mimpi Tentang Mantan Menurut Primbon
    Saat kita tidur, sering sekali mengalami pengalaman bawah sadar yang melibatkan beberapa indra atau sudah sangat dikenal dengan sebutan mimp...
  • 8 Tanda Pasangan Terlalu Mencintai Anda
    Mencintai dan dicintai adalah dua hal yang harus terjadi secara seimbang. Keseimbangan itu perlu untuk membuat keadaan bisa berjalan dengan...
  • 6 Ciri-ciri Orang Yang Mencintaimu Diam Diam
    Kita tidak akan pernah mengira jika ada seorang teman atau bahkan sahabat yang secara diam-diam menyukai atau mencintai kita. Hal ini mungki...
  • 7 Hal Ini Bisa Membuat Cewek Diperjuangkan Cowok Mati-matian
    Sudah sewajarnya jika Cinta itu membutuhkan perjuangan. Khususnya Cowok, sudah menjadi kodratnya jika memperjuangkan kebersamaan dari seora...
  • 10 Cara Agar Pacar Selalu Merindukan Kita
    Kekasih selalu merindukan kita ketika kita sedang tidak ada, cukup wajar jika kita baru awal jadian. Tapi Pacar yang sudah cukup lama berp...
  • 4 Cara Mengetahui Wanita Tidak Perawan
    Banyak sekali yang menyatakan bisa mengetahui ciri-ciri wanita perawan atau tidak. Ada yang salah ada juga yang merasa yakin bahwa itu bena...
  • 10 Hal Yang Di Alami Cowok Jika Sudah Sangat Mencintai Pacar
    Tidak banyak Cewek yang percaya bahwa Cowok yang menjadi kekasihnya sudah benar-benar mencintai Dirinya. Sangat banyak Cewek yang justru me...

Pemberitahuan Email

Pemberitahuan Artikel Terbaru

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