Cara Membuat Scroll Top Jquery Effect WordPress

Sering anda melihat website yang menambahkan scroll top ke atas dengan disertai efek halus, Ini sangat berguna sekali buat para pengunjung jika anda mempunyai website dengan halaman yang panjang, dan dengan scroll top ini anda memberikan pengguna anda cara mudah untuk kembali ke atas. Pada artikel ini, saya akan menunjukkan cara untuk menambahkan sebuah scroll top dengan efek yang terlihat halus di WordPress menggunakan jQuery.

Menambahkan Scroll Top Efek dengan jQuery di WordPress

Untuk menambahkan Scroll Top, saya akan menggunakan jQuery, beberapa CSS dan satu baris kode HTML dalam tema WordPress anda. Pertama buka editor teks seperti Notepad. Buat file dan simpan sebagai scrolltop.js. Salin dan sisipkan kode ini dalam file tersebut:

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; }); });

Simpan file dan upload ke direktori atau folder theme wordpress anda /js/ . Jika theme wordpress yang anda gunakan tidak memiliki folder /js/, buatlah terlebih dahulu dan masukkan file scrolltop.js. Kode ini adalah script jQuery yang akan menambah efek gulir mulus ke tombol yang akan membawa pengguna ke bagian atas.

Hal berikutnya yang perlu anda lakukan adalah untuk menambahkan scrolltop.js ke theme wordpress anda. Untuk melakukan itu dengan baik, kita akan enqueue script di WordPress. Salin dan sisipkan kode ini ke file functions.php theme anda.

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

Langkah berikutnya Paste HTML ini kedalam file footer.php theme anda.

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

Selanjutnya tambahkan code CSS berikut ke file style.css theme yang anda gunakan.

#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; }

dalam css diatas, saya menggunakan gambar scrolltop.png sebagai icon yang akan digunakan untuk scroll top, dan saya masukkan gambar tersebut di folder /images/ dari theme wordpress yang digunakan. silahkan anda upload juga gambar ke folder images dari theme anda.

Baca : Membuat scroll top sederhana di wordpress