Button Back To Top Smooth Scroll

Tombol back to top dengan efek smooth dan ripple efek menggunakan jQuery

---

Tutorial Blog: Cara Membuat Tombol Kembali ke Atas Smooth Scroll

Masuk Blogger: Tema > Edit HTML

Tambahkan kode CSS di bawah ini sebelum kode ]]></b:skin> atau </style>

/* 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}

Selanjutnya tambahkan kode berikut ini sebelum kode </body>

<!-- 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>

Simpan Tema


   DEMO