Biasanya jika kita menggunakan scroll atau menggulung dengan hash (#), contohnya memberi tampilannya akan seperti meloncat. Nah, dengan scroll smoth hal ini bisa membuat scrolling pada halaman terlihat lebih halus. Mari kita lihat langkah demi langkahnya.
Catatan: Bagi yang belum mengerti dengan teknik ini silahkan di baca keterangan mengenai Kontribusi dengan HTML yang menentukan penargetan URL dan ID
Sebelum mencoba tutorial ini pastikan bahwa di blog sudah ada JQuery Library agar bisa berjalan dengan baik. jika belum ada maka gunakan script berikut untuk memasukkan JQuery kedalam Blog
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>Javascript yang digunakan untuk menghaluskan Scroll atau penggulungan halaman adalah sebagai berikut:
<script>Contoh peng-aplikasi-an pada HTML (untuk memposting mode ini gunakan mode HTML bukan Compose)
$(function () {
function filterPath(string) {
return string.replace(/^\//, '').replace(/(index|default).[a-zA-Z]{3,4}$/, '').replace(/\/$/, '');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');
//Setiap link dengan tag hash di dalamnya (tidak bisa melakukan ^ = untuk mengecek bahwa link berada di halamn yg sama)
$('a[href*=#]').each(function () {
// Pastikan link-nya adalah halaman yang sama
var thisPath = filterPath(this.pathname) || locationPath;
if (locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/, '')) {
// Pastikan target
var $target = $(this.hash),
target = this.hash;
if (target) {
// Cari lokasi dari target
var targetOffset = $target.offset().top;
$(this).click(function (event) {
// Mencegah jump-down
event.preventDefault();
// Animate untuk menargetkan
$(scrollElem).animate({
scrollTop: targetOffset
}, 400, function () {
// Set hash URL setelah animasi sukses
location.hash = target;
});
});
}
}
});
// Gunakan elemen pertama yaitu "scrollable" (memperbaiki masalah lintas platform browser)
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i < argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop() > 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop() > 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}
});
</script>
<ul>
<li><a href="#contoh2">Scroll Ke Halaman 2</a></li>
<li><a href="#contoh3">Scroll Ke Halaman 3</a></li>
</ul>
<h1 id="contoh1">Halaman 1</h1>
<p> ........ Kalimat atau isi postingan blog ........... </p>
<h1 id="contoh2">Halaman 2</h1>
<p><a href="#main">Top</a></p>
<p> ........ Kalimat atau isi postingan blog ........... </p>
<h1 id="contoh3">Halaman 3</h1>
<p><a href="#main">Top</a></p>
<p> ........ Kalimat atau isi postingan blog ........... </p>
