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 ketika 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 ketika 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 ketika di klik. Yuuk sob ikuti tutorial di bawah ini.
Cara Membuat Tombol Back To Top Yang Smooth Scroll Di Blog
Pastikan di template teman sudah memasang script eksternal JQuery, tapi kalau di template teman belum ada teman dapat memasang isyarat tersebut di bawah isyarat <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 teman copy isyarat CSS di bawah ini kemudian letakan isyarat tersebut di atas isyarat </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 isyarat di bawah ini dan letakan isyarat tersebut di atas isyarat </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 teman dan lihat hasil nya.
Untuk demo teman dapat lihat di blog ini dan scroll kebawah hingga muncul tombol back to top nya.
Note : Bila di template teman sebelum nya sudah ada Tombol Back To Top, harap isyarat tombol back to top yang ada di template teman di hapus dulu menyerupai isyarat CSS dan isyarat script back to top nya (biasa nya ada di atas isyarat </body>)
Mungkin itu saja yang dapat aku bagikan pada kesempatan kali ini. semoga artikel ini dapat bermanfaat buat teman yang sedang mencari Cara Membuat Tombol Back To Top Yang Smooth Scroll Di Blog. Selamat mencoba!