Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Membuat Smooth Scroll Pada Anchor Point

Membuat smooth scrolling pada hash target dengan jquery.
smooth scrolling
jQuery Smooth Scrolling to Anchor Point - Mungkin sobat pernah melihat beberapa web seperti Wikipedia, apabila di klik tautan maka akan meloncat kepada paragaph tertentu. Inilah yang akan saya jelaskan saat ini. Bedanya, apabila di wikipedia, tidak menggunakan smooth scrolling.

Sebelum menjelaskan cara pembuatannya, untuk lebih jelasnya silahkan kunjungi dulu halaman demo.


Untuk menerapkannya pada template, simpan kode ini di atas </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $('a[href^="#"]').on('click',function (e) {
     e.preventDefault();

     var target = this.hash,
     $target = $(target);

     $('html, body').stop().animate({
         'scrollTop': $target.offset().top
     }, 900, 'swing', function () {
         window.location.hash = target;
     });
 });
});
//]]>
</script>

Cara menggunakannya sobat hrus menulis pada postingan dengan mode HTML. Contoh link :

<a href="#services">Services</a>

Untuk menentukan pargraf yang dituju, sobat harus menambahkan id yang sesuai dengan link tadi, contoh :

<div id="services">
.....
isi paragraf
.....
</div>

Untuk mengatur ketinggian dari batas atas browser, misalkan sobat menggunakan floating menu, maka tambahkan jarak pada script sebelumnya (lihat ke atas). Untuk menambahkannya pada baris yang seperti ini:

'scrollTop': $target.offset().top - 60

Masih ada pertanyaan? silahkan diskusikan di kolom komentar.

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

82 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. widih keren euy, jadi lebih gampil. :-d
    1. hahaha, keren euy komentar pertamaxnya. :D
  2. Hehehehe resep jadi tiasa luluncatan :D atas bawah top down 1 2 3 4 loncaaatttt....heheheh :D
    Keyyyeeennn :-bd :-bd :-bd jempolna sakampungeun kang :D
    1. loloncatan aka gogolosoran wkwkkwwk.. beuh eta jempol meuni balatak :D
  3. keren kang :)
  4. TOPBGT kang... :)
    Kalo yang seperti google gimana kang. Seperti Spoiler, tp yang disemunyikanya sebuah paragraph
    https://support.google.com/chrome/answer/95606?hl=id
    1. itu pake toggle.. coba search aja di gugel
      atau coba ini :

      ⇒ [url=http://jsfiddle.net/kangismet/ksVXt/]http://jsfiddle.net/kangismet/ksVXt/[/url]
  5. makasih kang infonya sangat membantu ^_^
    artikel langkah lagi nih ^_^
    - Blogwalking -
    1. beuuuuh.... blogwalking terus :-d
  6. wah demonya keren Bang :) makasih buat tipsnya....salam Blogger SUPERRRRRR>>>>> :)
    1. wkwkkwk... shabat superrr
  7. aya nu hade, scroll full screen! erek? tong ah bising kabitai ;))
    1. alim ah.. resep keneh scroll to path :)
  8. ada2 aja tutorialnya.. :)
    1. gara2 kemarin make, jadi ngeshare deh
  9. Syuper sekali...!! haha,, Kayaknya ini lebih cocok buat laman faq (forum tanya jawab) deh.. :s
    1. betul... saya juga rencana bikin tutorial faq's :)
  10. Unknown
    Komentar ini telah dihapus oleh pengarang.
  11. Mancap Pokonamah kang
    1. nancep we lah :)
  12. izin repost nyak kang is? :D
    1. monggo mas... :)
  13. bagus sekali kang ismet efeknya memang bagus :-d
    1. hehe bisa aja..
  14. Ilmu baru buat saya nih Kang,. di coba di terapkan di blog saya Kang
    Terima kasih atas sharing nya.
    1. mangga kang dicobian
  15. absen dulu kang hahahay lama gk kesini
    1. kemana aja nih baru absen :)
  16. wew di pasang juga Tombol back to topnnya :]
    - artkel baru kang! - mohon di cicipi :p -
    makasih udah share kang!
    - Salam damai -
    1. maaf ane jadi salah pake seharusnnya OpenID :p
      - salam damai kang ismet -
      komentar sendiri ngak pa'pa kan di bales! :D
  17. Saya bookmark Kang, nanti kalau saya butuh bantuan saya hubungi jenengan ya.

    Kesuwun artikelnya.
  18. wah akhirnya, lumayan bisa ditaruh di web nih yang awalnya main kasar sekarang bisa lebih alus
    1. wew artikelnya kasar? :p bahaya :p [ yah kalo ane sih juga gitu ] sekarang yang langkahan dikit :D yang artikel sebelumnnya, ane ngak pernah ngeliat! :D
      WOW! super sekali!
      - Blogwalking yuk! -
  19. Tutornnya ane baru liat nih kang, makasih udah share..
    - kali ini mantab! - :D
  20. naek turuna gancang euy jadi leklok, wkkwkwkkkww
    1. hahhaha.... siga bulak balik ka talang kang :)
  21. keren kang izin meramaikan dulu
    [ absen di malam hari :) ]
    - Blogwalking yuk! -
    1. absen di tolak, soalnya buku absennya ada di saya. wkwkw
  22. Blogwalking kang .... hehehe

    emilseo.blogspot.com
    1. ane juga kang!
      artikel terbaru nih :)
      Daengrio.com <---- artikel terbaru!
  23. jalan jalan kang

    mantapweb.blogspot.com
  24. Apsen lagi kang, mumpung belum update :)
    [ saran nya dong kak, template baru nih ]
    - salam damai! - daengrio
    1. kereeeeen
  25. Unknown
    Komentar ini telah dihapus oleh pengarang.
  26. Asikk kang, nih yg gw cari", izin coba ya ...
  27. absen kang!
    malam gni gak bisa tidur, mending ke kangismet! ^_^
    Daengrio.com <---- artikel terbaru!
  28. jquery biikkin lemott kanggg....
    1. kadang suka bingun antara memilih kecepatan, stylish dan UI :)
  29. berlaku untuk halaman lain juga nih ngga kang ?
    Maksudnya anchor point akan diarahkan ke artikel lain, bukan di artikel yang sama
    1. ngga, hanya pada halaman itu saja, kalau ke halaman lain, bisa dicoba
      $(window).bind("load", function () {
      var urlHash = window.location.href.split("#")[1];
      $('html,body').animate({
      scrollTop: $('#' + urlHash).offset().top
      }, 4000);
  30. kodenya ditumpuk jadi seperti ini tidak apa-apa kang ??
    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash,
    $target = $(target);

    $('html, body').stop().animate({
    'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
    window.location.hash = target;
    });
    });
    });
    $(window).bind("load", function () {
    var urlHash = window.location.href.split("#")[1];
    $('html,body').animate({
    scrollTop: $('#' + urlHash).offset().top
    }, 4000);
    //]]>
    </script>
    1. selama script berpungsi ga apa2 ko..
  31. Artikel yang bermanfaat kang, saya terapkan dulu ke template saya :D www.fajriandaviar.blogspot.com, hampura narok link :p
  32. Menarik lagi nih Kang script nya, simak lagi Kang Ismet
    Terima kasih atas infonya Kang
  33. makasih kang atas ilmu nya..
    ini yang ane cari selama ini.. ane kirain kagak bisa diterapin di blog tapi ternyata bisa.
    cocok untuk blog ane karena setiap artikelnya berisi beberapa bagian seperti screenshot,download link,dsb.

    blogwalking yuk! http://lzmodern.blogspot.com :) :D
  34. kang kode yang <a href="#services">Services</a> kok kalo diklik mengarah ke halaman dashboard blogger, saya salah dimananya nih :(

    contoh: http://kodesaja.blogspot.com/2014/01/membuat-breadcrumb-terindex-oleh-google.html
    1. begitu posting.. jangan klik lagi mode Compose, atau supaya permanen bisa manual :
      http://kodesaja.blogspot.com/2014/01/membuat-breadcrumb-terindex-oleh-google.html#pertama
  35. bang, ane ada tugas ngedesain web dinamis, nah ini kok ga bisa smooth ya? padahal udah sesuai dengan panduan diatas, mohon bantuannya :)
    1. alternatif pakai jQuery SmoothScroll bang, coba cari di web jquery
  36. Thx banget nih kang, udah bisa scroll. Tapi kok nggak smooth ya? :(
  37. Terimakasih, masih dalam tahap saya pertimbangkan
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.