Membuat Smooth Scroll Back To Top dengan jQuery

Membuat smooth scroll back to top di blogger. Bagi sebagian sahabat blogger mungkin sudah familiar dengan kata-kata Smooth Scroll back to top/kembali keatas. Smooth sendiri berarti lembut. Jadi smooth scroll berarti menggulung dengan lembut. Untuk membuat tombol Back To Top biasa, mudah saja sebetulnya, tinggal menambahkan kode "#" akan tetapi kembali keatas secara langsung tidak lembut.

Tombol back to top biasanya digunakan pada blog yang artikelnya panjang, untuk memudahkan pengunjung melihat artikel di atas. Ada beberapa cara untuk menambahkan tombol back to top ini.

Disini akan saya share dengan cara yang paling mudah, tanpa edit HTML. Hanya menambahkan WIDGET saja. Ada dua style yang akan saya berikan, silahkan kalian pakai yang mana yang kalian suka.

Style 1 ( Tanpa Fade In dan Fade Out )
Maksud Fade In dan Fade Out disini adalah tombol akan langsung muncul begitu blog di buka.

Untuk membuatnya silahkan tambahkan widget HTML/Java Script,
masukkan kode dibawah ini:

tinggal menambahkan kode # akan tetapi kembali ke atas secara langsung tidak lembut. - See more at: http://blog.kangismet.net/2012/07/membuat-smooth-scroll-back-to-top-dengan-jquery.html#sthash.LumA4YBK.dpuf

mudah saja sebetulnya, tinggal menambahkan kode # akan tetapi kembali ke atas secara langsung tidak lembut. - See more at: http://blog.kangismet.net/2012/07/membuat-smooth-scroll-back-to-top-dengan-jquery.html#sthash.LumA4YBK.dpuf

<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglzLWe4uAH7einCw5o_Q2P6HknWP3hLXTqiCVAOms6QXKEDCA6ll37rzVha3Uuf7l3w5VeIfbOSB98AYes7kjEQyIZ1RLSZ7Kws1Ts7hQyXzRB0UV-auJY-6GIREfLdSyAlrGurrT0hbw/s400/Back-to-top.png" /></a>

Apabila sudah ada jquery plugin, silahkan hapus kode jquerynya.

Style 2 ( Dengan Fade In dan Fade Out )
Maksud Fade In dan Fade Out disini adalah tombol tidak akan langsung muncul kecuali sudah discroll ke bawah.

Untuk membuatnya tambahkan kode ini diatas </head> :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <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 tambah widget HTML/Java Script dan tambahkan kode dibawah ini:

<style type='text/css' scoped='scoped'> #ScrollToTop{text-align:center; position:fixed; bottom:0px; right:3px; cursor:pointer;display:none} </style> <div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhooMO5sbn2L2wlidrpca6xhdcgB1smZKTtaFHwxFgjD4t12wfN9x6ytIghEuT95yq1PQcnnkF2h8Yy5fBONZP2X3i_cvpjymUJr6-8Rj92gWC6CUWmWh1TAFCpwpKuoGVtpRRGwt2ZQiAc/s1600/arrow-up_basic_blue.png'/></div>

Semoga tulisan tentang Cara Membuat Smooth Scroll Back To Top ini bermanfaat untuk kalian.
Terima Kasih.

Widget

Tweet