Entahlah apakah judul ini tepat untuk penamaannya yang pasti saya tidak terlalu tahu tentang namanya yang penting kerja =D. Cek link berikut.
Sebelumnya, ID yang saya maksudnya itu contohnya seperti #header-wrapper (yang bertanda pagar).
Cara ini biasanya digunakan pada halaman F.A.Q, pengunjung akan diberikan link pertanyaan dan jika link di klik otomatis pengunjung akan scrolling ke jawaban.
Smooth Scroll ini fungsinya hampir sama seperti scroll to top, hanya bedanya jika scroll to top mengarahkan kita ke atas blog sedangkan Smooth Scroll To ID yang saya maksud ini mengarahkan kita ke ID tertentu (silahkan lihat pada Demo). Misalnya kita ingin membuat sebuah link yang akan membawa pengunjung ke bagian post dengan cara scrolling, kita bisa gunakan <a href='#post-wrapper' class='page-scroll'>Bawa Diriku</a>. Kuncinya hanyalah pada class page-scroll, karena kita akan menambahkan fungsi pada class tersebut menggunakan jQuery.
Lagi dan lagi jQuery :D, saya beralasan menggunakan jQuery lebih mudah dalam membacanya daripada menggunakan Javascript Dasar. Jadi pastikan kawan sudah memasang Library Jquery.
Mari kita mulai.
Karena saya menggunakan effect easing, jadi pasang dulu library easingnya diatas </body>
<script src='https://rawgit.com/brayenid/borneoscript3/master/jquery.easing.1.3.js'/>
Lalu tempelken jQuery berikut ini diatas </body>
<script>
$('.page-scroll').on('click',function(e){
var href = $(this).attr('href');
var bungkusanhref = $(href);
$('html, body').animate({
scrollTop: bungkusanhref.offset().top - 50}, 2000, 'easeOutExpo');
e.preventDefault()
});
</script>
<a href='#main' class='page-scroll'>Scroll To Main</a>Seperti yang saya katakan diatas, kita akan memberikan fungsi pada .page-scroll sehingga link yang kita beri class page-scroll dapat menjalankan perintah kita untuk scrolling.
Jika biasanya kita meng-klik elemen yang ber-atribut href maka halaman akan reload dan misalnya kita membuat membuat href='#main' otomatis URL yang kita buka akan menambahkan di belakangnya menjadi babla.com#main. Namun pada kasus ini hal itu tidak akan terjadi, karena kita telah menambahkan e.preventDefault(), perintah ini berfungsi untuk mencegah halaman melakukan reload, jadi jika kita mengklik link yang memiliki class page-scroll maka link tersebut tidak akan melakukan reload.
Saya harap artikel ini dapat dimengert. Sekian dari saya, terima kasih.
Artikel Terkait
Pakai Credit Link ? Gengsi !
Seperti itulah segelintir Blogger yang saya temui selama ini. Saya memulai ngeblog dari tahun 2013, saat itu saya masih kelas 1/2 SMP, saya mempunyai ketertarikan pada blog na ... 
Cara Membuat Animasi Setelah Halaman Web/Blog Termuat
Kali ini saya akan kembali membahas tentang pembuatan efek/animasi sederhana, ya walaupun saya katakan sederhana namun efek ini sangat mungkin untuk dikembangkan oleh kawan di ... 
Membuat Dropdown Menu Responsive Dengan Effect Float
Wah panjang sekali ini judul, sebenarnya ini menu lebih menggunakan position Fixed dan bukan float :D, tetapi karena menu ini seperti melayang maka saya menggunakan kata float ... 
Membuat Tombol Link Sederhana Dengan CSS
Sudah lama saya gak share tentang Tips Blogger karena beberapa hari ini saya cuma share artikel Umum seperti Berita Misteri, Game, dll pokoknya. Maklum saya kurang berpengalam ... 
Cara Membuat Link Atau Tulisan Berkedip
Kali ini saya akan memberikan tutorial kepada sobat blogger tentang cara membuat link atau tulisan biasa berkedip.
Sebenarnya saya sangat tidak suka dengan desain blog yang be ...
