Cara Membuat Tombol Scroll to Top HTML dan Jquery

Halo temen temen semua, setelah sekian lama saya ga nulis artikel karena ada kesibukan bikin project maka pada waktu kosong ini (alias belum ada kesibukan..heheheh) saya ingin membagikan tutorial Cara Membuat Tombol Scroll to Top HTML dan Jquery. 

Baca Juga : Cara Membuat Preview Gambar Sebelum Diupload

Fitur "Scroll to Top" atau dalam bahasa indonesianya skrol ke atas sangat berguna bagi sebuah website untuk memudahkan user dalam menggunakan website kita. Biasanya ketika data yang ditampilkan banyak dan setelah di scroll ke bawah maka tombol scroll to top nya otomatis muncul dan jika di klik otomatis halaman scroll ke atas. 

Ok, dalam artikel ini saya menggunakan tentunya library Jquery dengan framework css yaitu bootstrap.

Script di bawah ini merupakan HTML biasa

<div id="home">

</div>

<div style="height:1500px;padding-top:10px"><center><h4>SCROLL TO TOP</h4></center></div>

<a href="javascript:;" class="scrolltotop"><span class="glyphicon glyphicon-chevron-up"></span></a>

Script di bawah ini merupakan css agar tampilan tombol scroll to top nya lebih menarik

a.scrolltotop {
    background: #D50000 none repeat scroll 0 0;
    bottom: 20px;
    color: #ffffff;
    display: none;
    font-size: 20px;
    height: 40px;
    padding-top: 5px;
    position: fixed;
    right: 20px;
    text-align: center;
    width: 40px;
    z-index: 99;
}

Dan terakhir script java script agar aksi scroll nya berjalan.

//ketika di scroll muncul icon scroll ke atas
$(window).scroll(function () {
        var totalHeight = $(window).scrollTop();
        if (totalHeight > 300) {
            $(".scrolltotop").fadeIn();
        } else {
            $(".scrolltotop").fadeOut();
        }
    });

//proses scroll
    $('a.scrolltotop').on('click', function (event) {
        $([document.documentElement, document.body]).animate({
            scrollTop: $("#home").offset().top
          }, 300);
    });

Dari semua script di atas, saya rasa sangat sederhana dan simpel sih menurut saya. silahkan simpan scriptnya atau projectnya kemudian test pada browser kesayangan anda. Maka akan muncul tampilan seperti contoh di atas artikel ini. 

Namun bagi temen temen yang ingin script lengkapnya biar lebih paham dan mengerti, saya juga sudah sediakan link download filenya pada tombol download di bawah ini. Silahkan di download dan jika memang masih ada yang belum dimengerti bisa tinggalkan komentar di bawah ya.. terimakasih