Membuat Smooth Scroll Back To Top dengan jQuery

Style1 (tanpa fade in dan fade out)

Maksudnya tanpa fade in dan fade out di sini adalah, tombol akan langsung muncul begitu blog dibuka.

DEMO

Untuk membuatnya, silahkan tambahkan widget HTML/JavaScript, masukan kode ini :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href='javascript:void(0);' onclick='jQuery(&apos;html, body&apos;).animate({scrollTop:0}, &apos;slow&apos;);' title="Kembali ke atas"><img src="http://1.bp.blogspot.com/-nzyPKluz5vM/Tj99pniZ_-I/AAAAAAAAAnw/oaVP_YzuMnQ/s320/pkyu.jpg" /></a>

Style2 (dengan fade in dan fade out)

Maksudnya fade in dan fade out disini adalah, tombol tidak akan langsung muncul kecuali telah di scroll ke bawah.

DEMO

Untuk membuatnya, tambahkan kode ini di atas </head> :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><br /> <script type='text/javascript'> $(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#ScrollToTop').fadeIn()} else { $('#ScrollToTop').fadeOut();}}); $('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},1000);return false})}); </script>

Kemudian tambahkan Widget HTML/JavaScript

<style type='text/css' scoped='scoped'> #ScrollToTop{text-align:center; position:fixed; bottom:0px; right:3px; cursor:pointer;display:none} </style><br /> <div id='ScrollToTop'> <img alt='Back to top' src='http://1.bp.blogspot.com/-nzyPKluz5vM/Tj99pniZ_-I/AAAAAAAAAnw/oaVP_YzuMnQ/s320/pkyu.jpg'/></div>

---

Share

Like

G+

Tweet

Tweet

---

Artikel Terkait

---

Silahkan Memberikan Komentar Jika Ada Hal Yang Kurang Dipahami Dengan Topik Yang Telah Sobat Baca. Biasakan Berkomentar Dengan:

۞ Sopan dan Bahasa Yang Mudah Dipahami.
۞ Tidak Memasukkan Link Aktif Dalam Form Komentar.
۞ Berkomentar Sesuai Artikel Atau Postingan.
۞ Berilah Informasi, Jika Script Atau Link Yang Tidak Berfungsi Dan Mati.
۞ komentar Jorok / Kasar / SARA / PORNO Anggap Sebagai SPAM.