Web Design : Cara Membuat Tombol ScrollTop

Bicara tentang web design tidak akan ada habis-habisnya, jika mengikuti perkembangan maka banyak sekali yang harus kita pelajari seperti penyesuaian dalam framework. Pada kesempatan kali ini saya akan share cara membuat tombol ScrollTop. Tombol ini berfungsi untuk mengembalikan halaman ke atas, tombol ini sangat berguna untuk user supaya tidak capek scroll ke atas atau reload halaman untuk kembali ke halaman atas.


Di tutorial ini saya menggunakan framework favorit saya yaitu Materializecss, jika kalian tertarik saya sertakan silahkan install dahulu disini. Alasan saya suka menggunakan framework yang tergolong baru ini karena dokumentasinya lengkap dan easy to use.

contoh gambar scrolltop

Yang perlu kalian lakukan adalah install dulu framework materialize, sertakan jQuery saya menggunakan versi 2.1.1, berikut saya sertakan juga link-linknya.

<!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- Compiled and minified CSS -->
<!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>


Warna default dari floating button-nya adalah hijau (teal) untuk merubah warna tersebut kita memerlukan css tambahan untuk meng-override  css bawaan framework.

.btnColor{
        background-color: #2c3e50;
     
      }
      .btnColor:hover{
        background-color: rgb(0,0,0);
      }
      .hideBtn{
        display: none;
      }

Langkah selanjutnya kita buat floating buttonya, secara default posisinya sudah diatur di pojok bawah, jika kalian ingin meng-custom silahkan kreasikan sendiri dengan membuat css baru.

<!--Button Fixed to Scroll Top-->
<div class="fixed-action-btn hideBtn">
    <a class="btn-floating btn-large btnColor" id="btnColor">
      <i class="large material-icons">keyboard_arrow_up</i>
    </a>
</div>

Langkah terakhir kita buatkan script agar tombol berfungsi, disini saya juga menambahkan autohide dimana tombol tidak akan terlihat saat berada diposisi paling atas.
<!--Script untuk button to Top -->
<script type="text/javascript">
  $(document).ready(function(){

  //Check to see if the window is top if not then display button
  $(window).scroll(function(){
    if ($(this).scrollTop() > 100) {
      $('.hideBtn').fadeIn(200, function(){
        $(this).css('display', 'block');
      });
    } else {
      $('.hideBtn').fadeOut();
    }
  });

  //Click event to scroll to top
  $('.btnColor').click(function(){
    $('html, body').animate({scrollTop : 0},800);
    return false;
  });

});
</script>

Oke sekian tutorialnya, saya rasa tombol ini sengat berguna selain untuk mempercantik web design kita tombol ini juga memudahkan user untuk navigasi. Semoga bermanfaat dan terima kasih sudah berkunjung. Jika ada masalah silahkan tambahkan di kolom komentar. 

Artikel Terkait


EmoticonEmoticon