Kang Rian
4
Kang Rian
11/15/2013 09:55:00 PM
Smooth Scrolling Effect - Paling Simple BRO!
Smooth Scrolling Effect - Paling Simple BRO!
Haha , kenapa ane bilang paling simple? monggo sobat bukti.in sendiri yahh :D , pada kesempatan kali ini ane cuman mau re-share tutorial dari web nya abang ane "CSS-Tricks.com" wkwkwk, soalnya abang ane sama-sama tak berambut kaya author nya css-tricks.com :D hehe *bercanda .. Untuk demonstransi nya , contoh kita akan membuat sebuah link/anchor text yang fungsinya ketika di klik link tersebut akan menggiring kita ( bukan menggiring bola ) untuk ke tempat/area divisi yang kita inginkan , contoh klik tombol tambahkan komentar dibawah ini :
Markup seperti link di atas, ± Sepert ini :
<a href="#comment-form">Tambahkan Komentar</a>
Ekhm , belum beres bro! :D , sebelum bikin markup di atas jangan lupa pasang javascript di bawah ini tepat di atas kode </head> yaah bro, silahkan bro! jangan malu-malu :
<script type='text/javascript'>
//<![CDATA[
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
//]]>
</script>
Kang Rian Ikuti
Web & Graphic Designer - Berpengalaman sejak 2010, fokus membantu Perusahaan / UMKM agar dikenal secara Global melalui Website Profesional & Desain yg Menjual.
Cek. Jasa-Design.web.id
Cara Memasang Tooltip Responsive di Blog dengan jQuery.
Haloo.. udah pada bangun sob?, setelah beberapa hari kemarin ane share template Pertamax - Free Responsive Blogger Template nah pagi ini s...
pakek jquery nyak?
BalasHapusmemang emmoy, eh salah emang smooth :P
:thumbup muhun leres kang ..
Hapus:2thumbup sob, tapi punyaku udah ada :D
BalasHapusgapapa sob, santai aja :D .. karena niat ane cuman sharing kok .. lagian gak wajib buat di pakai di blog sobat :) hehe .. salam kenal sob ..
Hapusudah lama nih ga ninggalin jejak disini. heheh.
BalasHapusmakin simple n kece aja gan ni blog. n tutorial yg ini manteuuup pisan, seueur kaanggo. heheh. hatur nuhun tos share gan. . :2thumbup :2thumbup
hehe , muhun kang ridho sami2 :shakehand .. aduh , pangling sareng kang ridho .. kamana wae atuh? nembe pendak .. :matabelo
Hapushahah, aya wae gan. nuju paciweuh sareng tugas ieu teh, janten jarang katoong. :shakehand
Hapusbtw, homepagena ajiib euy. diantos ah suprais nu sanesna Kang Rian. :D
oh enya, wih .. cumangeudh eaaa ! hehe .. muhun kang , iseng2 wee ieu ge , tambah teuing hulang-huleng teu paruguh .. munding ameng coding :D wkwkwk
HapusSimple sekali ini Kang :)
BalasHapusScriptnya seuprit manfaatnya selangit :)
jadi terharu kang .. :matabelo
Hapusnaha kana blogspot deui.. kamana nu .web.id?
BalasHapusmuhun kang , raoseun di blogspot .. lebih orijinal ceunah basa sumedang na mah :D
Hapushahah, kana sumedang wae ah. kade saur Pidi Baiq ge tong ka sumedang kang. :cendol
Hapushhaha? naha kunaon emg kang ridho? .. apanan eta teh lembur pun aki .. :(
HapusSip mas .. Ini yang saya cari cari :D
BalasHapusiya mas .. ane juga baru nemu :D hehe
Hapuswow ternyata begini nih caranya, baru tau saya :bingung
BalasHapusHehe , iya gan .. semoga bermanfaat yee :D
HapusAsik nih mas bro.. smooth banget. Kalau penerapannya untuk horizontal scrolling, kira-kira metode jQuery nya jauh beda gak ya? ☺
BalasHapuswaduh :bingung , saya sendiri belum sempet googling tuh .. jadi nda sempet paham juga bro :D
HapusMeh cepet sampe ke kolom komentar .. memang ajib kang
BalasHapus:2thumbup ajib beud kang .. hehe
HapusSImple aja yak kodingnya , terima kasih Kang :D
BalasHapus