Cara menambahkan Scroll to Top di WordPress

Pernahkah anda melihat sebuah tombol yang berbentuk seperti anak panah dan akan selalu muncul jika anda scroll ke bawah dari suatu halaman, pada umumnya anda akan bisa melihat Button ini jika anda membuka suatu halaman yang isinya sangat banyak. Anda tahu apakah itu ? , jawabannya adalah Scroll to Top button .

Scroll to Top adalah sebuah tombol yang biasanya bergambar anak panah ke atas dan digunakan untuk menuju ke bagian atas dari sebuah halaman, pada umumnya yang memiliki Scroll to Top hanyalah Theme yang berbasis Framework seperti Genesis. Tapi bukan berarti Theme biasa tidak bisa menggunakan fungsi Scroll to Top, anda hanya perlu menambahkan sedikit kode-kode ke dalam Theme anda. Semuanya akan kita bahas dalam Post ini.

Sebenarnya terdapat dua cara untuk menambahkan Scroll to Top di WordPress, yang pertama menggunakan Plugin dan yang kedua dengan menambahkan kode-kode ke dalam Theme. Untuk cara termudah yang pastinya adalah cara pertama yaitu menggunakan Plugin smooth page scroll to top , ketika anda menggunakan Plugin tersebut anda tidak perlu set-up apapun jika ada tolong diberi tahu.

Dan bagi yang ingin custom Scroll to Top Button-nya, anda bisa ikuti langkah-langkah dibawah  ini :

1. Pertama buka Aplikasi Web Coding seperti Dreamweaver, jika tidak ada gunakan saja notepad .

2. Setelah itu salin kode dibawah ini ke Notepad

jQuery(document).ready(function($){
 $(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
   $('#smoothup') .fadeOut();
        } else {
   $('#smoothup') .fadeIn();
        }
    });
 $('#smoothup').on('click', function(){
  $('html, body').animate({scrollTop:0}, 'fast');
  return false;
  });
});

Setelah itu Simpan dengan nama smoothscroll.js .

2. Setelah anda membuat File smoothscroll.js , upload File tersebut ke Direktori /js/ dari Theme anda. Contohnya http://www.contoh.com/public_html/wp-content/themes/twentytwelve/js . Jika pada Theme anda tidak terdapat Direktori /js/ , buatlah Folder js pada Theme anda.

3.  Selanjutnya adalah salin kode dibawah ini ke function.php dari Theme anda, jika sudah tekan tombol update file untuk menyimpan.

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '',  true );

Setelah anda menyalin kode diatas ke function.php , kali ini anda hanya perlu membuka footer.php dari Theme anda. Jika anda sudah membuka footer.php , selanjutnya adalah salin kode dibawah ini ke mana saja pada footer.php lalu save.

<a href="#top" id="smoothup" title="Back to top"></a>

4. Diatas kita hanya membuat Link atau perintah agar scroll ke atas namun pada link tersebut tidak ada gambar, jadi supaya mudah digunakan maka kita perlu logo atau ikon scroll to top. Jika anda tidak punya anda bisa cari di Google atau buat sendiri, kalau anda sudah punya ikon scroll to top maka tahap selanjutnya adalah memasang Skrip agar dan ditampilkan pada Home Page.

Sebelum kita memasang skrip ke Sytle.css hal yang perlu anda perhatikan adalah ukuran dari logo tersebut seperti panjang dan tinggi karena akan dituliskan ke skrip kode-kode nanti. Contohnya saya akan menggunakan Logo berukuran 30 x 30 maka hasilnya seperti ini :

#smoothup { 
height: 30px; 
width: 30px; 
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("http://www.allpcind.com/wp-content/uploads/2014/01/Scroll-to-top-Contoh-Ikon.png"); 
-webkit-transition-duration: 0.4s; 
-moz-transition-duration: 0.4s; transition-duration: 0.4s; 
}

#smoothup:hover {
-webkit-transform: rotate(360deg) }
background: url('') no-repeat;
}

Keterangan :

Height : tinggi logo atau ikon

Weight : panjang atau lebar logo ikon

Background : link atau lokasi ikon berada

Silahkan anda salin skrip diatas ke Sytle.css anda lalu lihat keterangan diatas agar tidak salah dalam penggunaan, jika sudah disalin jangan lupa di Save.

. Dan lihatlah hasilnya. Untuk mencoba apakah skrip tersebut berfungsi coba anda scroll ke bawah maka akan muncul logo atau ikon scroll to top tapi jika ikon tersebut tidak muncul silahkan Asking.

Dilihat cara yang lengkap memang agak sulit namun anda bisa custom untuk meletakkan Logo atau memiliki ikon namun pastinya anda harus mengalami kesulitan dalam menyalin skrip dan mengedit isinya tapi yang penting berhasil. Ingat juga kalau tidak paham atau ngerti atau terdapat kesulitan mohon bertanya.

Itulah Cara menambahkan Scroll to Top di WordPress, Jika ada pertanyaan atau masalah mengenai Post saya di atas silahkan Komentar atau Hubungi kami di Contact us. Jangan lupa untuk Follow Twitter blog saya atau Like us Facebook untuk mendapatkan Posts blog ini yang terbaru dan juga Konsultasi Pertanyaan dengan cepat. Salam.