Cara Menambahkan Gulir Halus ke Efek Teratas di WordPress menggunakan jQuery

Apakah Anda ingin menambahkan efek gulir halus ke bagian atas halaman di situs WordPress Anda?

Efek gulir ke atas sangat bagus ketika Anda memiliki halaman yang panjang dan ingin memberi pengguna Anda cara mudah untuk kembali ke atas. Ini membantu meningkatkan pengalaman pengguna situs web Anda.

Pada artikel ini, kami akan menunjukkan cara menambahkan efek scroll-to-top yang mulus di WordPress menggunakan jQuery dan plugin.

Apa itu Smooth Scroll dan Kapan Anda Harus Menggunakannya?

Kecuali situs memiliki menu header yang lengket, pengguna yang menggulir ke bagian bawah halaman atau posting WordPress yang panjang harus secara manual menggesek atau menggulir kembali ke atas untuk menavigasi situs.

Itu bisa menjadi gangguan nyata, dan seringkali pengguna hanya akan menekan tombol kembali dan pergi. Itu sebabnya Anda memerlukan tombol yang akan dengan cepat mengarahkan pengguna ke bagian atas halaman.

Anda dapat menambahkan fungsi ini sebagai tautan teks sederhana tanpa menggunakan jQuery, seperti ini:

<a href="#" title="Back to top">^Top</a>

Itu akan mengirim pengguna ke atas dengan menggulir ke atas seluruh halaman dalam milidetik. Ini berhasil, tetapi efeknya bisa menggelegar, seperti ketika Anda menabrak gundukan di jalan.

Gulir halus adalah kebalikan dari itu. Ini akan menggeser pengguna kembali ke atas dengan efek visual yang menyenangkan. Menggunakan elemen seperti ini dapat secara drastis meningkatkan pengalaman pengguna di situs Anda.

Yang mengatakan, mari kita lihat bagaimana Anda dapat menambahkan gulir halus ke efek teratas menggunakan plugin WordPress dan jQuery.

Cara Menambahkan Efek Scroll-to-Top yang Halus Menggunakan Plugin WordPress

Metode ini direkomendasikan untuk pemula, karena Anda dapat menambahkan efek scroll-to-top ke situs WordPress tanpa menyentuh satu baris kode pun.

Hal pertama yang harus Anda lakukan adalah menginstal dan mengaktifkan plugin WPFront Scroll Top. Jika Anda memerlukan bantuan, silakan lihat panduan kami tentang cara memasang plugin WordPress.

Setelah aktivasi, Anda dapat pergi ke Settings » Scroll Top dari dashboard WordPress Anda. Di sini Anda dapat mengonfigurasi plugin dan menyesuaikan efek gulir halus.

Pertama, Anda harus mengeklik kotak centang 'Diaktifkan' untuk mengaktifkan tombol gulir ke atas di situs Anda. Selanjutnya, Anda akan melihat opsi untuk mengedit offset gulir, ukuran tombol, opacity, durasi fade, durasi scroll, dan banyak lagi.

Jika Anda menggulir ke bawah, Anda akan menemukan lebih banyak opsi seperti mengedit waktu sembunyikan otomatis, mengaktifkan opsi untuk menyembunyikan tombol di perangkat kecil, dan menyembunyikannya di layar wp-admin.

Anda juga dapat mengedit apa yang dilakukan tombol saat Anda mengkliknya. Secara default, itu akan menggulir ke bagian atas halaman, tetapi Anda dapat mengubahnya untuk menggulir ke elemen tertentu di pos atau bahkan menautkan ke halaman.

Ada juga opsi untuk mengubah lokasi tombol. Ini akan muncul di sudut kanan bawah layar secara default, tetapi Anda juga dapat memilih untuk memindahkannya ke salah satu sudut lainnya.

Plugin WPFront Scroll Top juga menawarkan filter untuk menampilkan tombol scroll-to-top hanya pada halaman yang dipilih.

Biasanya, itu akan muncul di semua halaman di blog WordPress Anda. Namun, Anda dapat menavigasi ke bagian 'Tampilan di Halaman' dan memilih di mana Anda ingin menampilkan pengguliran ke efek teratas.

Plugin ini juga menawarkan desain tombol pra-bangun yang dapat Anda pilih. Anda harus dapat dengan mudah menemukan desain yang cocok dengan situs Anda.

Jika Anda tidak dapat menemukan tombol gambar bawaan yang sesuai untuk Anda, maka ada opsi untuk mengunggah gambar khusus dari perpustakaan media WordPress.

Setelah selesai, cukup klik tombol 'Simpan Perubahan'.

Sekarang Anda dapat mengunjungi situs web Anda untuk melihat aksi tombol gulir ke atas.

Menambahkan Gulir Halus ke Efek Teratas dengan jQuery di WordPress

Cara ini tidak disarankan untuk pemula. Sangat cocok untuk orang yang nyaman mengedit tema karena termasuk menambahkan kode ke situs web Anda.

Kami akan menggunakan jQuery, beberapa CSS, dan satu baris kode HTML di tema WordPress Anda untuk menambahkan efek gulir atas yang halus.

Pertama, buka editor teks seperti Notepad dan buat file. Silakan dan simpan sebagai smoothscroll.js .

Selanjutnya, Anda perlu menyalin dan menempelkan kode ini ke dalam file:

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, Anda dapat menyimpan file dan mengunggahnya ke folder /js/ di direktori tema WordPress Anda. Untuk lebih jelasnya, silakan lihat panduan kami tentang cara menggunakan FTP untuk mengunggah file ke WordPress.

Jika tema Anda tidak memiliki direktori /js/ , Anda dapat membuatnya dan mengunggah smoothscroll.js ke dalamnya. Anda juga dapat melihat panduan kami di file WordPress dan struktur direktori untuk informasi lebih lanjut.

Kode ini adalah skrip jQuery yang akan menambahkan efek gulir halus ke tombol yang membawa pengguna ke bagian atas halaman.

Hal berikutnya yang perlu Anda lakukan adalah memuat file smoothscroll.js di tema Anda. Untuk melakukan itu, kami akan membuat enqueue skrip di WordPress.

Setelah itu, cukup salin dan tempel kode ini ke file functions.php tema Anda. Kami tidak menyarankan untuk langsung mengedit file tema karena kesalahan sekecil apa pun dapat merusak situs Anda. Sebagai gantinya, Anda dapat menggunakan plugin seperti WPCode dan ikuti tutorial kami tentang cara menambahkan cuplikan kode khusus di WordPress.

wp_enqueue_script( 'smoothup', get_template_directory_uri() . 'https://cdn2.wpbeginner.com/js/smoothscroll.js', array( 'jquery' ), '',  true );

Dalam kode di atas, kami telah memberi tahu WordPress untuk memuat skrip kami dan juga memuat perpustakaan jQuery karena plugin kami bergantung padanya.

Sekarang kita telah menambahkan bagian jQuery, mari tambahkan tautan aktual ke situs WordPress kita yang membawa pengguna kembali ke atas. Cukup tempelkan HTML ini di mana saja di file footer.php tema Anda. Jika Anda memerlukan bantuan, silakan lihat tutorial kami tentang cara menambahkan kode header dan footer di WordPress.

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

Anda mungkin telah memperhatikan bahwa kode HTML menyertakan tautan tetapi tidak ada teks jangkar. Itu karena kita akan menggunakan ikon gambar dengan panah atas untuk menampilkan tombol kembali ke atas.

Dalam contoh ini, kami menggunakan ikon 40x40px. Cukup tambahkan CSS khusus di bawah ini ke lembar gaya tema Anda.

Dalam kode ini, kami menggunakan ikon gambar sebagai gambar latar tombol dan mengaturnya dalam posisi tetap. Kami juga telah menambahkan sedikit animasi CSS, yang memutar tombol saat pengguna mengarahkan mouse ke atasnya.

#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.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;
}

Pada CSS di atas, pastikan Anda mengganti https://www.example.com/wp-content/uploads/2013/07/top_icon.png dengan URL gambar yang ingin Anda gunakan. Anda dapat mengunggah ikon gambar Anda sendiri menggunakan pengunggah media WordPress, menyalin URL gambar, lalu menempelkannya ke dalam kode.

Kami harap artikel ini membantu Anda menambahkan gulir halus ke efek teratas di situs Anda menggunakan jQuery. Anda mungkin juga ingin melihat pilihan ahli kami tentang plugin WordPress terbaik untuk bisnis kecil dan panduan langkah demi langkah kami tentang cara memulai toko online.

Jika Anda menyukai artikel ini, silakan berlangganan Saluran YouTube kami untuk tutorial video WordPress. Anda juga dapat menemukan kami di Twitter dan Facebook.