Cara Membuat Smooth Scroll di Blogger


Rendiansyah.com - Cara Membuat Smooth Scroll di Blogger - Hallo, selamat datang lagi diblog saya untuk artikel kali ini yaitu membuat smooth scroll di blogger. Walupun smooth scroll bukan widget tapi sangat berguna dilakukan untuk Jump Link. Contoh jika Anda mengklik sebuah link pada TOC diatas atau mengklik tombol berikut Anda akan diarahkan pada "ID" yang ada dibawah dengan melakukan scroll dengan smooth atau lembut.



Mungkin di artikel kali ini sya tidak banyak kata lagi, karena artikel kali ini sangat simple sekali. Untuk membuatnya disini saya memiliki dua cara. Untuk cara kesatu Anda bisa menggunakannya dengan CSS dan untuk cara kedua Anda bisa menggunakannya dengan JavaScript & jQuery.

Cara Membuat Smooth Scroll di Blogger

1. Menggunakan CSS

Pertama-tama, login kedalam dashboard Blogger terlebih dahulu. Pilih menu Tema > klik tombol Edit HTML, dan tambahkan CSS dibawah ini tepat diatas kode ]]></b:skin>

html{scroll-behavior: smooth;}

Terakhir, simpan Tema dan lihat hasilnya. Untuk hasilnya yang menggunakan CSS saya sudah membuat contohnya dibawah ini.



2. Menggunakan JavaScript & jQuery

Jika pada template blogger Anda belum terdapat kode jQuery, maka tambahkan kode berikut diatas tag </body>

<script async="async" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Jika template Anda dudah terdapat kode seperti diatas, Anda tidak perlu menambahkannya.

Untuk menggunakannya sama saja dengan cara pertama. Anda hanya perlu menambahkan kode berikut pada tag penutup </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $('a[href^="#"]').on('click',function (e) {
     e.preventDefault();
     var smooth = this.hash,
     $smooth = $(smooth);
     $('html, body').stop().animate({
         'scrollTop': $smooth.offset().top
     }, 900, 'swing', function () {
         window.location.hash = smooth;
     });
 });
});
//]]>
</script>

Terakhir, tinggal simpan Tema. Dan untuk hasil menggunakan JavaScript & jQuery saya juga sudah menyediakan contohnya dibawah ini.



Penutup

Anda dapat menggunakan salah satu cara saja diatas. Jika saya sarankan lebih baik yang menggunakan CSS saja karena lebih ringan agar tidak terlalu banyak script.

Karena dapat menurunkan performa website Anda contohnya: kecepatan website Anda bisa turun. Sampai disini saja artikel kali ini, jika Anda merasa bahwa artikel diatas membantu Anda. Jangan lupa untuk mengshare artikel lainnya pada blog ini. Sekian dan Terimakasih

Post a Comment

Previous Post Next Post