how-to-scroll-to-top-effect-using-jquery.png

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.

Cara menggulir ke efek teratas menggunakan jQuery
Cara Menambahkan Gulir Halus ke Efek Teratas di WordPress menggunakan jQuery 7

Apa itu Smooth Scroll dan Kapan Anda Harus Menggunakannya?

Kecuali situs tersebut memiliki menu header lengketpengguna 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 gulir ke atas ke a Situs web WordPress tanpa menyentuh satu baris kode pun.

Hal pertama yang harus Anda lakukan adalah menginstal dan mengaktifkan WPfront Gulir Atas pengaya. Jika Anda membutuhkan bantuan, silakan lihat panduan kami di cara menginstal plugin WordPress.

Setelah aktivasi, Anda dapat pergi ke Pengaturan » Gulir Atas dari dasbor 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.

Edit pengaturan atas gulir WPfront
Cara Menambahkan Gulir Halus ke Efek Teratas di WordPress menggunakan jQuery 8

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 tautan 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.

Lebih banyak edit pengaturan atas gulir WPfront
Cara Menambahkan Gulir Halus ke Efek Teratas di WordPress menggunakan jQuery 9

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 . Anda blog WordPress. Namun, Anda dapat menavigasi ke bagian ‘Tampilan di Halaman’ dan memilih di mana Anda ingin menampilkan pengguliran ke efek teratas.

Pilih tempat untuk menampilkan efek
Cara Menambahkan Gulir Halus ke Efek Teratas di WordPress menggunakan jQuery 10

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 Pustaka media WordPress.

Pilih tombol gambar
Cara Menambahkan Gulir Halus ke Efek Teratas di WordPress menggunakan jQuery 11

Setelah selesai, cukup klik tombol ‘Simpan Perubahan’.

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

Gulir ke pratinjau tombol atas
Cara Menambahkan Gulir Halus ke Efek Teratas di WordPress menggunakan jQuery 12

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 untuk menambahkan efek atas gulir 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 /js/ folder di direktori tema WordPress Anda. Untuk lebih jelasnya, silakan lihat panduan kami di cara menggunakan FTP untuk mengunggah file ke WordPress.

Jika tema Anda tidak memiliki /js/ direktori, maka Anda dapat membuatnya dan mengunggah smoothscroll.js untuk itu. 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 smoothscroll.js file dalam tema Anda. Untuk melakukan itu, kami akan membuat enqueue skrip di WordPress.

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

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/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 tema Anda footer.php mengajukan. Jika Anda membutuhkan bantuan, silakan lihat tutorial kami di 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;
}

Di 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 dari plugin WordPress terbaik untuk bisnis kecil dan panduan langkah demi langkah kami tentang cara memulai toko online.

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

Postingan Cara Menambahkan Gulir Halus ke Efek Teratas di WordPress menggunakan jQuery pertama kali muncul di WPPemula.





Source link

Leave a Reply

Your email address will not be published.

logo-whatsapp
1
error: