Cara Menciptakan Tombol Back To Top Yang Smooth Scroll Di Blog

Di Blog ini aku juga pernah menciptakan artikel perihal Cara menciptakan tombol go up dan down di blog. Yang membedakan di tutorial kali ini aku hanya menciptakan untuk back to top nya saja dan yang niscaya nya smooth dikala di scroll.

Terkadang tidak semua template memiliki tombol back to top meskipun ada kemungkinan tidak semua tombol back to top tersebut berjalan dengan smooth. Contoh nya terkadang dikala 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 aku memakai icon SVG supaya lebih ringan supaya tidak memberat kan blog sobat. Lalu bagaimana cara menciptakan tombol back to top yang smooth atau ringan dikala di klik. Yuuk sob ikuti tutorial di bawah ini.

Cara Membuat Tombol Back To Top Yang Smooth Scroll Di Blog

Pastikan di template sahabat sudah memasang script eksternal JQuery, tapi kalau di template sahabat belum ada sahabat dapat memasang instruksi tersebut di bawah instruksi <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 sahabat copy instruksi CSS di bawah ini kemudian letakan instruksi tersebut di atas instruksi </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 instruksi di bawah ini dan letakan instruksi tersebut di atas instruksi </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 sahabat dan lihat hasil nya.
Untuk demo sahabat dapat lihat di blog ini dan scroll kebawah hingga muncul tombol back to top nya.

Note : Bila di template sahabat sebelum nya sudah ada Tombol Back To Top, harap instruksi tombol back to top yang ada di template sahabat di hapus dulu menyerupai instruksi CSS dan instruksi script back to top nya (biasa nya ada di atas instruksi </body>)

Mungkin itu saja yang dapat aku bagikan pada kesempatan kali ini. semoga artikel ini dapat bermanfaat buat sahabat yang sedang mencari Cara Membuat Tombol Back To Top Yang Smooth Scroll Di Blog. Selamat mencoba!