Sedikit Info Seputar
Tombol Back To Top Dengan Menggunakan Efek Bounce
Terbaru 2017
- Hay gaes kali ini team Android Apps For Free, kali ini akan membahas artikel dengan judul Tombol Back To Top Dengan Menggunakan Efek Bounce , kami selaku Team Android Apps For Free telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Android Apps For Free. semoga isi postingan tentang
Artikel jQuery, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
Tombol Back To Top Dengan Menggunakan Efek Bounce
Terbaru
link: Tombol Back To Top Dengan Menggunakan Efek Bounce
Berbagi Tombol Back To Top Dengan Menggunakan Efek Bounce Terbaru dan Terlengkap 2017
Efek Bouncing Untuk blog / website yang memiliki banyak informasi pada halamannya, mudah-mudahan bisa mendorong pengguna menelusuri lebih banyak konten-konten yang lainnya dengan fungsi tombol ini. Singkat cerita, beginilah alur kisah bagaimana cara membuatnya.Catatan: Gunakan Pencarian kode yang dimaksud dengan klik kiri 1x pada kotak template kemudian tekan Ctrl + F, masukan kode yang dicari dan enter.
1. Simpan kode JQuery berikut di atas
</head> dibagian head.JQuery
1<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/>Catatan: Kode ini memiliki banyak versi, saya menggunakan versi 1.7.2, kalo sudah dipasang dengan versi yang lain, lewati langkah ini agar tidak terjadi konflik.
2. Masukan kode CSS berikut diatas
]]></b:skin> atau diatas </style> dibagian head juga.CSS
12345678910111213#Back-to-top {
text-align: center;
z-index: 9999;
position: fixed;
bottom: 40px;
right: 30px;
cursor: pointer;
display: none;
opacity: 0.7;
}
#Back-to-top:hover {
opacity: 1;
}3. Masukan beberapa baris kode HTML berikut sebelum
</body>.HTML dan JavaScript
123456789101112131415161718192021<div id='Back-to-top'>
<img alt='Scroll to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihjDam6hyphenhyphenbVkCbkJEK7mzDCcfA_9J1t7ZOA07JgW_WG3EUS0pR4IZUarQhjsmt5bRE8pgRDG4f7KSK0Z2UodtbJ7CDKcF_7RXWRZpk5awZwMzzgAZ7uTBeL_DknYt2ZsZYUCD61SROU29j/s128/backtotop.png'/>
</div>
<script type='text/javascript'>
$(function() { $(window).scroll(function() {
if($(this).scrollTop()>400) {
$('#Back-to-top').fadeIn();
}
else { $('#Back-to-top').fadeOut();}
});
$('#Back-to-top').click(function() {
$('body,html')
.animate({scrollTop:0},300)
.animate({scrollTop:40},200)
.animate({scrollTop:0},130)
.animate({scrollTop:15},100)
.animate({scrollTop:0},70);
});
});
</script>Catatan: Warna pink adalah link gambar, sebaiknya diganti menggunakan link punya sendiri, di save terus upload ke tempat punya sendiri, sedangkan angka-angka dalam JavaScript adalah pengaturan efeknya.
4. Selesai sudah cara membuatnya, tinggal di Save. Dan Lihat hasilnya
Terima kasih telah berkunjung dan membaca. Mudah-mudahan Bermanfaat.
