Back to top button dengan efek smooth scroll - Agiel Triono

Back to top button dengan efek smooth scroll

Baca Juga
material design back to top

Pada kesempatan kali ini saya akan membagikan simple tutorial yang akan saya bahas yaitu tentang menambahkan tombol back to top dengan efek smooth dan ripple efek dan saya rasa kalian juga sudah tahu sebelum nya kegunaan tombol back to top pada website.

disini saya menggunakan efek ripple tanpa menggunakan javascript ,hanya saja saya menggunakan Jquery untuk membuat efek smooth.
di karenakan saya menggunakan jquery maka terlebih dahulu anda harus menambahkan jquery library pada template sobat.

jika sudah terpasang jquery maka kita dapat memasang tombol ini.

Apa ini mobile friendly ?

Iya hanya menggunakan jquery untuk fungsi utama nya agar dapat menghasilkan efek smooth scroll ketika pengunjung mengeklik tombol jadi simak baik-baik tutorial ini.

untuk yang pertama kita akan memulai dengan menambahkan css style di bawah ini pada bagian <b:skin>.

/* Back To Top */
.safe-top{display:flex;cursor:pointer;position:fixed;color:#818181;border-radius:100%;bottom:8px;font-size:2em;padding:13px;text-align:center;-webkit-box-shadow:0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2);box-shadow:0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2);right:20px;overflow:hidden;background:rgb(255,255,255);z-index:200;visibility:hidden;opacity:0;-webkit-transition:all .3s ease-in;-moz-transition:all .3s ease-in;transition:all .3s ease-in}
.safe-top.safe-is-visible,.safe-top.safe-fade-out,.safe-top:hover{-webkit-transition:all .3s ease-in;-moz-transition:all .3s ease-in;transition:all .3s ease-in}
.safe-top.safe-is-visible{visibility:visible;opacity:1}
.safe-top.safe-fade-out{opacity:.5}
.safe-top:hover{opacity:1}
.safe-top{background-position:center;transition:background 0.8s}
.safe-top:hover{background:#fff radial-gradient(circle,transparent 1%,#fff 1%) center/15000%}
.safe-top:active{background-color:#dddddd;background-size:100%;transition:background 1ms}

atau jika anda ingin menaruh nya di tempat lain atau di bawah <b:skin> maka harus membuat tag style baru seperti di bawah ini.

<style type='text/css'>
/* Back To Top */
.safe-top{display:flex;cursor:pointer;position:fixed;color:#818181;border-radius:100%;bottom:8px;font-size:2em;padding:13px;text-align:center;-webkit-box-shadow:0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2);box-shadow:0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2);right:20px;overflow:hidden;background:rgb(255,255,255);z-index:200;visibility:hidden;opacity:0;-webkit-transition:all .3s ease-in;-moz-transition:all .3s ease-in;transition:all .3s ease-in}
.safe-top.safe-is-visible,.safe-top.safe-fade-out,.safe-top:hover{-webkit-transition:all .3s ease-in;-moz-transition:all .3s ease-in;transition:all .3s ease-in}
.safe-top.safe-is-visible{visibility:visible;opacity:1}
.safe-top.safe-fade-out{opacity:.5}
.safe-top:hover{opacity:1}
.safe-top{background-position:center;transition:background 0.8s}
.safe-top:hover{background:#fff radial-gradient(circle,transparent 1%,#fff 1%) center/15000%}
.safe-top:active{background-color:#dddddd;background-size:100%;transition:background 1ms}
</style>

kemudian tambahkan juga kode di bawah ini tepat di atas tag </body>.

<script type='text/javascript'>
//<![CDATA[
//Back To Top
$(function(){var offset=100,offset_opacity=1200,scroll_top_duration=700,back_to_top=$('.safe-top');$(window).scroll(function(){($(this).scrollTop()>offset)?back_to_top.addClass('safe-is-visible'):back_to_top.removeClass('safe-is-visible safe-fade-out');if($(this).scrollTop()>offset_opacity){back_to_top.addClass('safe-fade-out')}});back_to_top.on('click',function(event){event.preventDefault();$('body,html').animate({scrollTop:0,},scroll_top_duration)})})
//]]>
</script>

terakhir tambahkan kode ini tepat di atas kode pada step sebelum nya.

<!-- Back To Top -->
<div class='safe-top'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 20V4M6 10l6-6 6 6"/></svg></div>

maka hasil nya akan terlihat seperti ini.

<!-- Back To Top -->
<div class='safe-top'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 20V4M6 10l6-6 6 6"/></svg></div>
<script type='text/javascript'>
//<![CDATA[
//Back To Top
$(function(){var offset=100,offset_opacity=1200,scroll_top_duration=700,back_to_top=$('.safe-top');$(window).scroll(function(){($(this).scrollTop()>offset)?back_to_top.addClass('safe-is-visible'):back_to_top.removeClass('safe-is-visible safe-fade-out');if($(this).scrollTop()>offset_opacity){back_to_top.addClass('safe-fade-out')}});back_to_top.on('click',function(event){event.preventDefault();$('body,html').animate({scrollTop:0,},scroll_top_duration)})})
//]]>
</script>

kemudian anda simpan template.

sekarang anda sudah selesai memasang tombol back to top dan bisa langsung di lihat hasil nya pada blog.

oh iya sedikit informasi pada variable scroll_top_duration=700 yaitu value 700 menunjukan milisecond(milidetik) untuk seberapa lama halaman akan kembali ke atas jika angka menjadi ribuan misalnya saja 1000 maka akan menjadi 1 second(detik).

mungkin itu saja yang dapat saya share hari ini , dan artikel ini saya cukupkan sampai disini.
apabila ada kendala saat memasang atau butuh pertanyaan silahkan bertanya sesuai topic atau jika hanya ingin bertanya seputar blog silahkan pergi ke halaman kontak.

  • Untuk memasukan gambar silakan upload gambar pada komentar disqus.
  • Untuk memasukan link silahkan cantumkan link pada komentar tanpa menggunakan tag <a>.
  • Untuk menulis huruf bold silahkan gunakan <strong>...</strong> atau <b>...</b>.
  • Untuk menulis huruf italic silahkan gunakan <em>...</em> atau <i>...</i>.
  • Untuk menulis huruf underline silahkan gunakan <u>...</u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike>...</strike>.
  • Untuk menulis kutipan pendek gunakan <q>...</q>.
  • Untuk menulis kutipan panjang gunakan <blockqoute>...</blockqoute>.
  • Untuk menyembunyikan konten panjang gunakan <spoiler>...</spoiler>.
  • Untuk menulis syntax highlighter silahkan gunakan <pre><code>...</code></pre>, dan silahkan parse kode pada tab TOOLS.