Membuat Tombol Back To Top Yang Smooth Scroll Di Blog

Diposting pada

Tombol Back To Top Yang Smooth Scroll Di Blog

Tombol Back To Top Yang Smooth Scroll – Pada artikel sebelum nya saya juga sempat membahas Cara membuat tombol go up dan down di blog. Tapi untuk artikel kali ini berbeda dari tombol go up dan down sebelum nya. Karena disini saya akan berbagi  Cara Membuat Tombol Back To Top Yang Smooth Scroll Di Blog.

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.

Baca Juga: Anti AdBlock Ala Blog Igniel

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.

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 dapat bermanfaat buat Anda sobat Blogger. Jangan lupa untuk Bagikan Artikel ini ke teman-teman media social kamu. Selamat mencoba!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *