Asslmu'alaikum Wr. Wb.
Selamat sore sahabat Jago Coding, pada sore yang indah ini saya akan berbagi tutorial tentang java script & jquery. Pada tutorial ini, kita akan membuat button back to top dengan jquery.
Pada sebuah website, untuk membaca sebuah artikel panjang terkadang kita melakukan scrolling hingga artikel yang ada itu selesai. Dengan button back to top user, secara otomatis dapat kembali ke atas (back to top) yang muncul ketika user scrolling ke bawah.
Oke langsung saja...
Berikut source codenya :
Source Code untuk Javascript & JQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { // cache scroll to top button var b = $('#bt'); // Hide scroll top button b.hide(); // FadeIn or FadeOut scroll to top button on scroll $(window).on('scroll', function(){ // if you scroll more then 400px then fadein goto top button if ($(this).scrollTop() > 400) { b.fadeIn(); // otherwise fadeout button } else { b.fadeOut(); } }); // Animated smooth go to top b.on('click', function(){ $('html,body').animate({ scrollTop: 0 }, 500 ); return false; }); }); </script>
Penjelasan source code :
Source code di atas merupakan source code javascript yang di butuhkan. Selain javascript di perlukan juga jquery.min.js yang bisa teman-teman download. Disana juga terdapat beberapa fungsi untuk memberikan animasi sehingga button top up bisa bergerak ke atas.
Source Code untuk CSS
<style type="text/css"> #wrapper{ background: white none repeat scroll 0 0; border: 2px solid; border-radius: 5px; margin: 10px auto; overflow: hidden; padding: 10px 15px; width: 360px; } #bt { position: fixed; bottom: 30px; right: 100px; } #bt a { width: 64px; display: block; text-align: center; font: 11px/100% Arial, Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; color: #bbb; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; } #bt a:hover { color: #000; } #bt span { width: 64px; height: 64px; display: block; margin-bottom: 7px; background: #000 url(top.png) no-repeat center center; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; } #bt a:hover span { background-color: #fff; } #back{ font-weight: bold; font-size: 22px; padding:10px; border: 2px solid #333; border-radius: 29px; } </style>
Penjelasan source code :
Source code di atas merupakan css untuk memberikan style pada html sehingga desainnya lebih menarik.
Sourc Code untuk index.html
<div id="wrapper"> <h3><b>Animasi Scroll Back to Top dengan Jquery</b></h3> <p>↓ Scroll down</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> <p>↓</p> </div> <div id="bt"> <a href="#top"><span></span></a> </div>
Selanjutnya semua file di jadikan dalam satu file saja kemudian simpan dalam index.html dan jalankan dengan web browser.
Terimakasih, semoga bermanfaat.