Anda di halaman 1dari 1

One Page Scroll Tanpa plugin di Grand Topaz Regency

Hai guys, dah lama banget ga nongol di nih blog, karena kelamaan update jadi
bengkak lagi deh alexa ranknya, kali ini apa yang ingin Gee bagi adalah one
page scroll teknik namun kali ini ga perlu pakai plugin, nah contoh kasus salah
satu webiste yang saya buat yaitu Grand Topaz Regency, situs ini merupakan
situs real estate model namun bukan marketplace atau direktori property
webiste, lebih ke personal atau developer.
Kali ini kita akan menggunakan fungsi dari jquery yaitu fungsi animate(),
sintaxnya cukup sederhana Cuma seperti ini (kalau mau coba kamu taruhnya
sebelum tag </head> Jangan lupa kamu ambil dulu librari dari javascript
framework yaitu jquery)
$(document).ready(function(){
$('.produk').click(function() {
$('li').removeClass('current');
$('.produk').addClass('current');
$('body,html').animate({scrollTop:530},400);
return false;
});
});
Penjelasannya kurang lebih seperti ini
$(document).ready(function(){
$('nama classnya jika di klik).click(function() {
$('tombol aktivenya di hilangkan').removeClass('current');
$('mengaktifkan tombol aktiv yang di klik).addClass('current');
$('body,html').animate({scrollTop:jarak top ke bawah berapa
pixel},waktu animasi berjalan);
return false;
});
});
Tapi ininya hanya di sintax ini :
$('body,html').animate({scrollTop:530},400);
Kalau belum jelas komentar aja di bawah ya biar enak balesnya....
Hari ini segini aja dulu ya besok kita coba share teknik yang lain

Anda mungkin juga menyukai