Cara Membuat Tombol Back To Top Yang Smooth Scroll Di Blog
Di Blog ini saya juga pernah membuat artikel tentang Cara membuat tombol go up dan down di blog. Yang membedakan di tutorial kali ini saya hanya membuat untuk back to top nya saja dan yang pasti nya smooth saat di scroll.
Terkadang tidak semua template mempunyai tombol back to top meskipun ada kemungkinan tidak semua tombol back to top tersebut berjalan dengan smooth. Contoh nya terkadang saat kita klik tombol back to top tapi tidak merespon dan juga terkadang waktu kita klik tombol nya tombol tersebut ngadat pas di tengah - tengah.
Tombol back to top ini saya menggunakan icon SVG agar lebih ringan agar tidak memberat kan blog sobat. Lalu bagaimana cara membuat tombol back to top yang smooth atau ringan saat di klik. Yuuk sob ikuti tutorial di bawah ini.
Cara Membuat Tombol Back To Top Yang Smooth Scroll Di Blog
Pastikan di template sobat sudah memasang script eksternal JQuery, tapi bila di template sobat belum ada sobat bisa memasang kode tersebut di bawah kode <head> di template sobat.
<script async="async" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Langkah selanjut nya silahkan sobat copy kode CSS di bawah ini lalu letakan kode tersebut di atas kode </style> pada template sobat.
/* Back To Top Smooth Scroll */
.backToTop {visibility:hidden; width:50px; height:50px; position:fixed; bottom:50px; right: 20px; z-index:99; cursor:pointer; border-radius:100px; opacity:0; -webkit-transform:translateZ(0); transition:all .5s; background:#D8261C url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center;}
.backToTop:hover {opacity: 1; background:#151515 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center;}
.backToTop.show {visibility:visible; bottom:20px; opacity:1;}
Lalu copy lagi kode di bawah ini dan letakan kode tersebut di atas kode </body> pada template sobat.
<div class='backToTop'/>
<script>
$(document).scroll(function() {
return $(document).scrollTop() > 300 ? $('.backToTop').addClass('show') : $('.backToTop').removeClass('show')
}), $('.backToTop').click(function() {
return $('html,body').animate({
scrollTop: '0'
});
});
</script>
Langkah terakhir Save Template sobat dan lihat hasil nya.
Untuk demo sobat bisa lihat di blog ini dan scroll kebawah sampai muncul tombol back to top nya.
Note : Bila di template sobat sebelum nya sudah ada Tombol Back To Top, harap kode tombol back to top yang ada di template sobat di hapus dulu seperti kode CSS dan kode script back to top nya (biasa nya ada di atas kode </body>)
Mungkin itu saja yang bisa saya bagikan pada kesempatan kali ini. semoga artikel ini bisa bermanfaat buat sobat yang sedang mencari Cara Membuat Tombol Back To Top Yang Smooth Scroll Di Blog. Selamat mencoba!
0 Response to "Cara Membuat Tombol Back To Top Yang Smooth Scroll Di Blog"
Catat Ulasan
Mohon komentar yang sewajarnya