Cara Membuat Efek Scrolling Tombol Back to Top Smooth dengan CSS di Blogger

Tutorial Blogger – Cara membuat efek scrolling back to top smooth dengan css di Blogger. Saat memiliki artikel yang panjang sebelumnya blog auqri.my.id tidak ada tombol back to top, dan jika ingin kembali keatas ya harus scrolling lagi menggunakan mouse yang dimiliki.

Akhirnya akhir-akhir ini blog auqri.my.id update berbagai macam fitur mulai dari tombol back to top, lalu fitur dark mode, menambah section baru di header, dan penambahan fitur Google Translate tanpa harus berpindah halaman. 

Perubahan ini tentu dilakukan berasal dari masukan, kritikan, serta komentar dari pengunjung pada artikel sebelum-sebelumnya. Akhirnya pada minggu ini semuanya bisa terlaksana, nah bagi Anda yang mau membuat fitur seperti ini saya sudah membuatkan beberapa tutorial untuk membuatnya:

• Cara Membuat Fitur Google Translate seperti Blog auqri.my.id 
• Cara Membuat Fitur Dark Mode di Blogger
• Cara Membuat Fitur Efek Scrolling Smooth di Blogger
• Cara Membuat Section Header seperti Blog auqri.my.id (soon) 

Nah pada kesempatan kali ini blog auqri akan berbagi cara membuat fitur efek scrolling smooth di blogger, efek ini akan berpengaruh pada keseluruhan blog tidak hanya tombol back to top saja akan tetapi tombol-tombol yang diberikan link ID pada halaman blog yang diberikan link simbol tanda pagar “#” .

Pada tampilan diatas terlihat saat ditekan tombol back to top halaman tidak langsung menuju keatas, akan tetapi ada efek scrolling keatas dengan smooth atau mulus. Untuk membuat efek seperti ini cukup tambahkan kode css dibawah ini, lalu letakkan diatas ]]></b:skin>

html {
  scroll-behavior: smooth;
}

Setelah ditambahkan silahkan simpan template blog Anda, dan lihat hasilnya. Jika kalian belum memiliki tombol back to top, nih saya bagikan milik saya sendiri. Saya membuat ini sendiri menggunakan text dan icon menggunakan svg agar lebih enteng, berikut kode program nya:

Rekomendasi: Cara Membuat Loading Blog Terasa Lebih Cepat dan Enteng

<a class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400" href="#" title="Back to Top">
  Back to Top 
  <svg class="h-3" fill="currentColor" viewBox="0 0 24 24">
<path d="M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z">
</path>
</svg>
</a>

Jika sudah simpan template blog, dan lihat hasilnya. Semoga bermanfaat.