Smooth Scrolling Effect - Paling Simple BRO!

Oleh. Kang Rian • 23 • Edit

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 :

Tambahkan Komentar

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>

Bagikan! Sent Share Tweet Pin it!

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

23 komentar

Beben Koben11/16/2013 1:17 AM
pakek jquery nyak?
memang emmoy, eh salah emang smooth :P
BalasHapus
Balasan
Yobert Parai11/25/2013 4:41 PM
:2thumbup sob, tapi punyaku udah ada :D
BalasHapus
Balasan
Ridho Muhammad Firdaus11/26/2013 6:05 PM
udah lama nih ga ninggalin jejak disini. heheh.
makin simple n kece aja gan ni blog. n tutorial yg ini manteuuup pisan, seueur kaanggo. heheh. hatur nuhun tos share gan. . :2thumbup :2thumbup
BalasHapus
Balasan
Heri Assidiqi11/27/2013 11:55 AM
Simple sekali ini Kang :)
Scriptnya seuprit manfaatnya selangit :)
BalasHapus
Balasan
Kang Ismet11/27/2013 1:50 PM
naha kana blogspot deui.. kamana nu .web.id?
BalasHapus
Balasan
Anonim11/27/2013 2:05 PM
Sip mas .. Ini yang saya cari cari :D
BalasHapus
Balasan
Anonim11/27/2013 7:01 PM
wow ternyata begini nih caranya, baru tau saya :bingung
BalasHapus
Balasan
Daniel Benny Simanjuntak11/28/2013 7:10 PM
Asik nih mas bro.. smooth banget. Kalau penerapannya untuk horizontal scrolling, kira-kira metode jQuery nya jauh beda gak ya? ☺
BalasHapus
Balasan
Ruly Jenar Nakula11/29/2013 12:58 PM
Meh cepet sampe ke kolom komentar .. memang ajib kang
BalasHapus
Balasan
Anonim10/06/2015 3:41 AM
SImple aja yak kodingnya , terima kasih Kang :D
BalasHapus
Balasan