Cara Menambahkan Gulir Halus ke Efek Teratas di WordPress Menggunakan jQuery
Pernahkah Anda melihat situs web yang menambahkan pengguliran halus ke bagian atas halaman? Ini bagus ketika Anda memiliki halaman yang panjang dan ingin memberi pengguna Anda cara mudah untuk kembali ke awal. Baru-baru ini, salah satu pembaca kami bertanya kepada kami tentang menambahkan pengguliran halus ke efek teratas di WordPress. Pada artikel ini, kami akan menunjukkan cara menambahkan pengguliran halus untuk kinerja terbaik di WordPress menggunakan jQuery.
Catatan: Tutorial ini dibuat untuk pengguna DIY tingkat menengah agar merasa bebas untuk mengedit tema mereka. Jika Anda ingin menggunakan metode plugin, gunakan soft page scroll to top plugin. Bagi mereka yang ingin mempelajari cara melakukan ini tanpa plugin, baca terus.
Apa itu pengguliran halus dan kapan menggunakannya?
Saat halaman atau postingan memiliki banyak konten, pengguna terpaksa menggulir ke bawah untuk membacanya. Saat pengguna menggulir ke bawah, semua tautan navigasi mereka meningkat. Ketika pengguna selesai membaca artikel itu, mereka harus menggulir ke atas untuk melihat apa lagi yang harus dilakukan di situs mereka. Menggulir ke tombol atas dengan cepat membawa pengguna ke bagian atas halaman. Anda dapat menambahkan ini sebagai tautan teks tanpa menggunakan jQuery, seperti ini:
^Top
Itu hanya mengirim pengguna ke bagian atas halaman dan menggulir seluruh halaman dalam milidetik. Ini fungsional, tapi seperti hit di jalan. Pengguliran halus adalah kebalikan dari itu. Geser perlahan pengguna ke bagian atas halaman. Ini menciptakan efek yang bagus dan meningkatkan pengalaman pengguna.
Tambahkan pengguliran halus ke efek teratas dengan jQuery di WordPress
Untuk menambahkan pengguliran halus ke efek teratas, kami akan menggunakan jQuery, beberapa CSS, dan satu baris kode HTML di tema WordPress Anda. Pertama buka editor teks seperti Notepad. Buat file dan simpan sebagai smoothscroll.js. Salin dan tempel kode ini ke dalam file:
jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop()
Guarde el archivo y cárguelo en la carpeta / js / de su directorio de temas de WordPress (consulte Cómo usar FTP para cargar archivos en WordPress). Si su tema no tiene un directorio / js /, cree uno y cargue smoothscroll.js en él. Este código es el script jQuery que agregará un efecto de desplazamiento suave a un botón que lleva a los usuarios a la parte superior de la página.
Lo siguiente que debe hacer es agregar smoothscroll.js a su tema. Para hacerlo bien, colocaremos el script en WordPress (obtenga más información en nuestra guía sobre cómo agregar correctamente los scripts en WordPress). Copie y pegue este código en el archivo functions.php de su tema.
wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '', true );
Dalam kode di atas, kami 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 bagian atas halaman. Tempelkan HTML ini di mana saja di file footer.php tema Anda.
Seperti yang Anda catat, kami telah menambahkan tautan, tetapi kami belum menautkannya ke teks apa pun. Ini karena kita akan menggunakan ikon gambar dengan panah atas untuk menampilkan tombol kembali ke atas. Dalam contoh ini kami menggunakan ikon 40x40px. Tambahkan ini ke lembar gaya tema Anda.
#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;
}
Dalam CSS di atas, kami menggunakan posisi tetap untuk ikon gambar kami dan kami menggunakan ikon gambar sebagai gambar latar belakang. Anda dapat mengunggah ikon gambar Anda menggunakan pengunggah media WordPress dan kemudian mendapatkan URL gambar untuk ditempelkan sebagai URL latar belakang. Kami juga menambahkan animasi CSS kecil ke tombol untuk memutar tombol saat pengguna mengarahkan kursor ke atasnya.
Menggulir ke atas memungkinkan pengguna untuk kembali ke awal dan menemukan hal lain untuk dilakukan di situs Anda. Hal lain yang dapat Anda lakukan adalah menambahkan bilah footer mengambang seperti yang kami miliki di situs kami untuk menampilkan konten unggulan. Jika Anda tidak ingin pengguna Anda menggulir ke atas untuk membagikan artikel Anda, sebaiknya gunakan plugin mengambang untuk bilah berbagi sosial seperti yang kami lakukan di WPBeginner.
Kami harap artikel ini membantu Anda menambahkan pengguliran halus ke bagian atas efek halaman di situs web Anda menggunakan jQuery. Untuk kegunaan lain dari jQuery di WordPress, Anda dapat melihat artikel FAQ akordeon jQuery kami atau artikel gambar pemuatan malas
Apakah menurut Anda menggulir ke efek atas berguna? Beri tahu kami dengan meninggalkan komentar di bawah.
