Selamat sore sahabat Jago Coding, pada sore yang indah ini saya akan berbagi tutorial tentang java script atau jquery. Pada tutorial ini, kita akan membuat button back to top dengan jquery.

Membuat Animasi Back to Top dengan JQuery

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>&darr; Scroll down</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</p>
                <p>&darr;</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.

 


About Author

Fajar Hakiki

My name is Fitrian Fajar Hakiki, Informatics Engineering students at UNIB. I Love My Fams, My Sis, My Bro, My Friend, & everything. I'm Little Progremmer. I'm Young Entrepreneur. I have DREAMS but I'm not a DREAMER


Comment & Discussions

    Please LOGIN before if you want to give the comment.