Menambahkan Tombol Kembali Keatas di Drupal Secara Manual

Tombol kembali ke atas atau back to top umumnya sering kita lihat pada situs – situs tertentu, seperti situs portal berita online, blog dan lain sebagainya. Ditambahkannya tombol kembali keatas ini tentunya bertujuan untuk mempermudah pengunjung website itu sendiri, contohnya ketika seorang pengunjung melakukan scroll kebawah ketika membaca artikel yang memang panjang kemudian ketika ingin kembali mengakses menu yang berada diatas maka pengunjung cukup menekan satu kali tombol kembali keatas dan secara otomatis pengunjung langsung bisa mengakses menu atau melihat menu yang ada diatas tanpa harus repot – repot melakukan scrolling keatas secara manual

Baca juga : Membuat Tombol Share Sosial Media di Drupal Tanpa Module

Umumnya cms – cms terkenal dan besar seperti halnya wordpress ataupun drupal menyediakan plugins/module untuk memenuhi banyak kebutuhan website seperti salah satunya adalah kebutuhan akan plugins yang bisa memberikan fasilitas tombol kembali keatas atau back to top yang bisa dipasang secara mudah pada situs. Tapi terkadang mungkin seseorang tidak terlalu ingin mengandalkan sebuah plugins dan lebih memilih untuk membuatnya sendiri secara manual.

Menambahkan Tombol Kembali Ke Atas di Drupal Secara Manual alias tanpa bantuan module sangatlah mudah, sama halnya seperti menambahkan tombol kembali keatas pada sebuah template blogspot, yang kita butuhkan hanyalah sebuah file Jquery/javascript, css, dan sedikit membuat fungsi dari Javascript yang bisa memberikan efek pada tombol kembali keatas yang dibuat. Namun perlu diingat hal ini tidak bisa dilakukan secara asal – asalan, karena di drupal ada aturan sendiri dalam melakukan custom/theming, kita tidak bisa langsung seenaknya menambahkan file tertentu pada template, Anda perlu membuatnya pada subtheme sehingga tidak mengganggu template utamanya.

Jadi sebelum melakukan praktik ini Anda sudah paham tentang bagaimana cara theming/templating yang baik di drupal ketika ingin menambahkan fungsi atau kostum tertentu. Caranya kita cukup membuat sebuah sub theme, kemudian mengcopy beberapa file pendukung seperti file page.tpl.php, html.tpl.php, node.tpl.php, dan block.tpl.php, tekning theming ini sudah pernah saya jelaskan pada artikel/tutorial video yang berjudul “Membuat Website Cantik Dengan Drupal & Bootstrap”


Menambahkan Tombol Kembali Ke Atas di Drupal Secara Manual

1. Buat class css dan id untuk membuat tampilan/gaya dari tombol kembali keatas, lalu tambahkan ke custom file style.css pada template masing – masing, contoh stylenya bisa seperti ini :
   

   /* Tombol Kembali Keatas */
   #back-to-top {
     background:#337ab7;
     color:#fff;
     padding:8px 10px;
     font-size:20px;
   }
   .back-to-top {
     position:fixed !important;
     position:absolute;
     bottom:18px;
     right:20px;
     z-index:999;
   }

2. Selanjutnya tambahkan pemanggil div class serta baris javascript dibawah ini ke file html.tpl.php tepat diatas tag body
   

   <div class='back-to-top'><a href='#' id='back-to-top' title='back to top'><i class='fa fa-chevron-up'/></i></a></div>
   <script type="text/javascript">
   jQuery(document).ready(function(){
       jQuery("#back-to-top").hide();
       jQuery(function () {
           jQuery(window).scroll(function () {
           if (jQuery(window).scrollTop() > 400) {
                   jQuery('#back-to-top').fadeIn();
           } else {
                   jQuery('#back-to-top').fadeOut();
           }
       });
       // scroll body to 0px on click
       jQuery('#back-to-top').click(function () {
           jQuery('body,html').animate({
                   scrollTop: 0
               }, 800);
               return false;
           });
       });
    });
    </script>

3. Terakhir, Save semua file kemudian reload situs Anda, maka nanti pada situs Drupal Anda akan melihat tombol back to top

Sampai disini, Anda sudah berhasil Menambahkan Tombol Kembali Ke Atas di Drupal Secara Manual. Untuk variasi (gaya) lainnya dari tombol kembali keatas silahkan berkreasi sendiri sesuai dengan kemampuan css masing – masing.

Video Cara Menambahkan Tombol Kembali Keatas di Drupal Secara Manual