Mungkin sudah sering anda melihat website yang menambahkan sebuah scroll top ke atas dengan efek halus, hal Ini sangat berguna untuk para pengunjung jika anda memiliki website yang terdapat sebuah halaman panjang. Dengan scroll top ini anda akan memberikan pengguna anda sebuah cara yang mudah untuk bisa kembali ke atas bagian halaman. Pada artikel kali ini, saya akan menunjukkan anda cara untuk membuat sebuah scroll top dengan menggunkan efek halus pada WordPress dengan menggunakan jQuery.
MENAMBAHKAN SCROLL TOP EFEK DENGAN JQUERY PADA WORDPRESS
Untuk dapat menambahkan Scroll Top, saya memakai jQuery, beberapa CSS serta satu baris kode berjenis HTML pada thema wordpress. Pertama bukalah aplikasi editor teks seperti Notepad. Buatlah file serta simpan sebagai scrolltop.js. Salin kemudian sisipkan kode ini ke dalam file tadi:
[php]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;
});
});[/php]
Simpanlah file kemudian upload ke dalam direktori theme wordpress milik anda /js/ . Jika theme wordpress yang dipakai tidak mempunyai folder /js/, buatlah dahulu dan masukkan file scrolltop.js tersebut. Kode ini merupakan script jQuery yang berfungsi menambah efek agar telihat bergulir mulus ke tombol yang memiliki fungsi untuk membawa pengguna ke bagian atas halaman.
Hal berikutnya yang harus anda lakukan untuk menambahkan scrolltop.js ke dalam theme wordpress yang dikapai. Untuk bisa melakukan itu dengan benar, kita akan enqueue script pada WordPress. Salin lalu sisipkan kode berikut ini ke dalam file functions.php theme WP anda.
[php]wp_enqueue_script( ‘smoothup’, get_template_directory_uri() . ‘/js/scrolltop.js’, array( ‘jquery’ ), ”, true );[/php]
Langkah yang berikutnya Pastekan kode HTML ini ke dalam file footer.php theme WP anda
[php]<a href="#top" id="smoothup" title="Back to top"></a>[/php]
Langkah selanjutnya tambahkanlah code CSS ini ke file style.css theme yang dipakai.
[css]#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("images/scrolltop.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;
}[/css]
Di dalam css diatas, saya memakai gambar scrolltop.png sebagai icon yang ingin dipakai pada scroll top, dan saya akan masukkan gambar ke folder /images/ dari theme wordpress yang dipakai. silahkan upload gambar ke dalam folder images pada theme anda.
Baca juga: CARA MENGEMBED TWEET DI POST DAN PAGE WEB WORDPRESS
