Smooth Scroll Berdasarkan Hash pada URL

Kita pasti sering menemukan button Back To Top diblog2 para blogger yang fungsinya untuk menScroll kebagian paling atas blog dengan efek smooth. bagaimana dengan url yang mempunyai hash bisakah diberi efek smooth scroll..? jawabannya bisa. Berawal dari pertanyaan Kang ismet yang menanyakan smooth scroll komentar yang ada diblog DTE. setelah lama keliling dunia maya untuk mencari smooth scrolling berdasarkan Hash pada URL hanya ketemu beberapa saja itupun sangat memusingkan menurutku tapi setelah lama berEksperimen akhirnya aku mengerti konsep smooth scroll berdasarkan URL ini.

Contoh url :

/2013/06/mengatasi-gambar-yang-tidak-terbuka.html?showComment=1373396775145#c6398197471529269289

Perhatikan #c6398197471529269289, Berdasarkan Hash tersebut maka browser secara otomatis akan loncat ke area yang mempunyai ID c6398197471529269289. Agar loncatan browser tersebut bisa lebih smooth/lembut kita bisa menggunakan script dibawah ini.

if (window.location.hash) {
    var d = $('html, body');
    var x = window.location.hash.substring(0);
    d.animate({
      scrollTop: $(x).offset().top - 10
    }, 5000);
  }

1. Masalah yang muncul

Memang Benar script tersebut bisa membuat scrolling hash lebih smooth tapi browser akan tetap loncat ke area komentar yang mempunyai ID tertentu (ID berdasarkan url seperti contoh diatas) lalu setelah browser loncat keArea ID komentar tersebut maka script diatas akan mengulangi scrollingnya secara smooth. ini sama saja bohong karena kita tidak bisa melihat pergerakan scrollingnya mulai dari atas hingga mencapai ID yang inginkan. ada solusi yang pernah aku baca di website stackoverflow yaitu menggunakan display: none jadi Area komentarnya terlebih dahulu kita beri display:none lalu kita bisa menggunakan jquery fadeIn() atau show() untuk menampilkan area komentarnya dalam beberapa detik. Anggap saja area komentar telah kita display: none lalu pada jsnya kita tulis seperti ini.

//memunculkan area komentar dengan efek fadeIn dalam 2 detik
$('.comments-content').fadeIn(2000);
var d = $('html, body');
  if (window.location.hash) {
    var x = window.location.hash.substring(0);
    d.animate({
      scrollTop: $(x).offset().top - 10
    }, 5000);
  }

kenapa kita memberi display: none..?? agar browser tidak langsung meloncat ke area ID komentar. tapi lagi2 masih saja browser meloncat keArea komentar berdasarkan ID yang ada pada URL. sebabnya karena browser masih akan mencari divisi dengan ID berdasarkan url tersebut (saat elemen pembungkus komentar kita beri efek fadeIn() atau show()). lalu bagaimana caranya agar scrolling bisa lebih lembut pergerakannya..?? caranya kita hapus ID pada area komentar lalu menggantikannya dengan class seperti contoh pada dibawah ini.

Pergantian ID menjadi class

Threaded Comments Blogger Tidak bisa Menggunakan Cara ini

Oh iya harus anda ingat bahwa Threaded Comment tidak bisa menggunakan cara ini karena kode HTML komentarnya tidak berada didalam template. Jika anda berniat menggunakan Threaded Comment Hack Milik BX-NicoNico anda bisa membacanya diblog DTE ini.

http://www.dte.web.id/2013/01/membuat-fitur-komentar-berbalas.html

Anda hanya perlu menghapus ID nya lalu menggantinya dengan Class perhatikan pada baris seperti ini.

<div class='comment-item clearfix' expr:id='data:comment.anchorName'>

Kode tersebut ada 2 jika kita sudah mengganti yang pertama ganti juga yang kedua, menjadi seperti dibawah ini.

<div expr:class='&quot;comment-item clearfix &quot; + data:comment.anchorName'>

Jika anda menggunakan threaded comment Versi lain dimana kode HTML komentarnya berada didalam template anda hanya perlu memodifikasinya seperti contoh diatas. lalu untuk efek smooth scrollnya anda tinggal memasang DOM jquery dibawah ini didalam template anda.

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
$(function(){
if(window.location.hash){
var x = window.location.hash.substring(1);
$('html,body').animate({scrollTop: $('.'+x).offset().top - 30}, 1500);
}
});
</script>
</b:if>

Penjelasan dikit mengenai kode.

$(function(){
Pembuka fungsi jquery

if(window.location.hash){
Jika URL mempunyai #hash

var x = window.location.hash.substring(1);
Mengambil #hash pada URL tapi pada substring pertama yaitu teks/angka setelah tanda pagar

$('html,body').animate({scrollTop: $('.'+x).offset().top - 30}, 1500);
body akan mengAnimasikan scrollTop berdasarkan Divisi yang mempunya class berdasarkan Hash pada URL. 30 adalah jarak renggang elemen saat discroll, 1500 adalah kecepatan animasi scrollnya.

}
Penutup if(window.location.hash){

});
Penutup jquery $(function(){

CONTOH