Cara Memasang Tombol Back To Top Dengan SVG
Back To Top merupakan tombol yang memudahkan pengunjung blog untuk kembali ke atas secara instan tanpa harus scroll halaman secara manual. Tombol ini benar-benar berguna sekali jika pengunjung sedang membaca artikel yang isinya panjang sekali dan ingin kembali ke menu atas secara instan.
Kita akan membuat tombol Back To Top dengan menggunakan icon SVG. Jadi, situs atau blog kalian tetap memiliki loading yang cepat dibandingkan menggunakan Font Awesome.
Pasti kalian sudah mengerti kan? Nah, mari kita langsung saja ke tutorialnya.
Memasang Tombol Back to Top
1. Letakkan kode di bawah ini tepat di atas </head>.
<style>/* Back To Top */.backtotop{display:none;background:#3c6382;color:#fff;font-size:1.4em;width:40px;height:40px;line-height:40px;outline:0;z-index:999;bottom:20px;right:20px;position:fixed;border-radius:5px;padding:0;text-align:center;cursor:pointer;opacity:1;transition:all .25s}.backtotop svg{width:24px;height:24px;transform:rotate(90deg);vertical-align:middle;transition:all .25s}.backtotop:hover{background:#0a3d62}</style>2. Kemudian tambahkan kode di bawah ini sebelum </body>.
<div class='backtotop hide'><svg viewBox='0 0 24 24'> <path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#fff'/></svg></div><script>//<![CDATA[$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},400),!1})});//]]></script>3. Kalian Simpan dan lihatlah hasilnya.
Penutup
Semoga artikel pendek ini bisa memberikan manfaat kepada kalian semua dan jika ada yang ingin ditanyakan silakan berkomentar di bawah