Plugin Smooth Scroll WordPress Gratis Terbaik 2022
Diterbitkan: 2021-11-09
Jika Anda telah membuat situs web tetapi konten situs web terlalu panjang sehingga tidak mudah dipahami pada situasi ini, Anda dapat menggunakan Plugin Smooth Scroll WordPress.
Plugin gulir WordPress Smooth akan membantu Anda semua untuk menggulir situs web ke atas dan ke bawah dengan sangat lancar. Ini tidak hanya akan meningkatkan pengalaman pengguna situs web Anda tetapi juga akan mendapatkan pengaruh besar pada tingkat konversi. Karena pengguna Anda akan terlibat di situs web Anda untuk waktu yang lebih lama.
Bagaimana Cara Menambahkan Gulir Halus ke Efek Teratas di WordPress menggunakan jQuery?
Apakah Anda bertanya-tanya mengapa berbagai situs web lain memiliki efek gulir yang mulus ke bagian atas halaman? Ini sangat ideal untuk menambahkan efek gulir atas yang halus jika Anda memiliki halaman yang panjang.
Ini membantu dalam meningkatkan pengalaman pengguna Anda di halaman Anda, dan pada saat yang sama, memudahkan mereka untuk kembali ke atas dengan cepat.
Sekarang pertanyaannya adalah, bagaimana Anda menambahkan gulir halus ke efek teratas di situs WordPress Anda? Nah, Anda bisa melakukannya dengan mudah menggunakan jQuery. Di sini kita akan berbicara tentang bagaimana Anda dapat melakukannya dengan mudah menggunakan jQuery. Baca terus:
Apa itu Smooth Scroll, dan Kapan Menggunakannya?
Jika halaman atau postingan memiliki banyak konten, pengguna harus menggulir ke bawah untuk membaca semuanya. Saat pengguna mulai menggulir ke bawah, tautan navigasi Anda mulai naik.
Saat pengguna selesai membaca, mereka harus menggulir untuk melihat apakah ada yang tersisa untuknya. Menggulir ke tombol atas memungkinkan pembaca untuk bekerja dengan cepat. Anda dapat memilih untuk menambahkan tautan teks ini tanpa perlu menggunakan jQuery.
<a href="#" title="Kembali ke atas">^Atas</a>
Itu akan mengirim pembaca ke bagian atas halaman sambil menggulir ke atas dalam sepersekian detik. Ini berfungsi sebagai yang fungsional.
Namun, gulungan halus adalah kebalikan dari ini. Gulir halus membantu pengguna untuk meluncur kembali ke area atas halaman. Ini membantu dalam meningkatkan pengalaman pengguna di situs Anda.
Menambahkan Smooth Scroll to Top Effect dengan jQuery di WordPress?
Jika Anda ingin menambahkan gulir halus ke efek teratas, Anda dapat menggunakan jQuery. Secara bersamaan, Anda perlu menambahkan beberapa CSS bersama dengan satu baris untuk kode HTML pada tema WordPress Anda.
Untuk memulainya, pertama-tama Anda perlu membuka editor teks, seperti Notepad. Sekarang Anda perlu membuat file dan melanjutkan untuk menyimpannya sebagai smoothscroll.js. Sekarang Anda perlu menyalin dan menempelkan kode ke area file:
jQuery(dokumen).siap(fungsi($){
$(jendela).scroll(fungsi(){
if ($(ini).scrollTop() < 200) {
$('#smoothup') .fadeOut();
}
kalau tidak {
$('#smoothup') .fadeIn();
}
});
$('#smoothup').on('klik', function(){
$('html, body').animate({scrollTop:0}, 'cepat');
kembali salah;
});
});
Sekarang Anda perlu menyimpan file. Setelah itu Anda dapat mengunggahnya ke folder /js /folder tema WordPress. Jika tema Anda tidak memiliki direktori /js/, maka Anda harus mulai dengan membuatnya.
Setelah itu Anda dapat mengunggah smoothscroll.js ke direktori ini. Kode ini disebut sebagai skrip jQuery, yang akan menambahkan efek pengguliran halus ke tombol. Ini pada dasarnya akan membantu pengguna untuk pergi dengan lancar ke bagian atas halaman.
Setelah itu Anda perlu menambahkan smoothscroll.js ini ke area tema Anda. Jika Anda ingin melakukannya, Anda perlu menambahkan skrip di WordPress. Berikut adalah skrip atau kode yang perlu Anda rekatkan ke file functions.php tema Anda:
wp_enqueue_script('smooth up', get_template_directory_uri() . '/js/smoothscroll.js', array('jquery' ), ”, true );
Kode ini mengirimkan WordPress perintah skrip. Pada saat yang sama, ia juga memberi tahu WordPress untuk memuat perpustakaan jQuery karena plugin bergantung padanya.
Setelah Anda selesai menambahkan bagian jQuery, sekarang Anda perlu menambahkan tautan sebenarnya ke situs word press, yang akan membawa pengguna kembali ke area teratas. Anda perlu menempelkan kode HTML di mana saja di file footer.php tema Anda:
<a href="#top" title="Kembali ke atas"></a>
Langkah ini mencakup penambahan tautan ke file tetapi tidak ditautkan dengan teks apa pun. Memang demikian, karena Anda perlu menggunakan ikon gambar ke panah ke atas yang memungkinkan Anda menampilkan tombol kembali ke atas.
Inilah Bagaimana Anda dapat menambahkan ikon 40x40px ke lembar gaya tema Anda:
#memperhalus {
tinggi: 40 piksel;
lebar: 40 piksel;
posisi: tetap;
bawah:50px;
kanan: 100 piksel;
indentasi teks:-9999px;
tampilan: tidak ada;
latar belakang: url("http://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-webkit-transisi-durasi: 0.4s;
-moz-transisi-durasi: 0.4s; durasi transisi: 0,4 detik;
}
#smoothup:arahkan kursor {
-webkit-transform: putar (360 derajat) }
latar belakang: url('') no-repeat;
}
Dalam CSS yang disebutkan di atas, Anda telah memilih untuk membekukan posisi ikon gambar. Ini juga termasuk penggunaan ikon gambar sebagai gambar latar belakang. Sekarang Anda perlu mengunggah ikon gambar Anda dengan bantuan pengunggah media WordPress.
Kemudian Anda bisa mendapatkan URL gambar yang harus Anda tempel sebagai URL latar belakang. Karena Anda telah menambahkan animasi CSS ke tombol yang terus memutar tombol, pengguna tetap mengarahkan penunjuk tetikusnya ke atas tombol.
Sekarang Anda perlu menggulir ke efek teratas, yang akan memungkinkan pengguna untuk kembali ke area teratas dan menemukan apa lagi yang dapat mereka lakukan di situs web Anda.
Anda juga dapat menambahkan floating footer kembali untuk membuat konten fitur memiliki tampilan yang mudah. Jika Anda tidak ingin pengguna Anda menggulir ke area teratas untuk membagikan artikel, Anda dapat menggunakan plugin bilah berbagi sosial mengambang untuk membuatnya lebih mudah dikelola.
Plugin gulir halus tahun 2022 – sangat ringan dan cepat
Plugin Smooth Scroll WordPress pasti akan bekerja lebih cepat dan efektif di semua perangkat dan browser lain tanpa kesulitan.
Selain itu, ini berfungsi luar biasa dengan plugin lain seperti Yoast SEO, Contact Form 7, NextGen Gallery, Slider Revolution, WooCommerce, SKT page builder, Visual Composer and Elementor, dan banyak lagi.
Bisnis skala besar atau situs web bisnis skala kecil seperti Blog, situs web Portofolio, situs web konsultasi, Situs Web Perusahaan, situs web terkait eCommerce, Agensi Kreatif, situs web Real Estat, CV Pribadi, situs web Perusahaan Ritel, dll. Dapat menggunakan Plugin Smooth Scroll WordPress untuk meningkatkan tampilan dan nuansa situs web.
Banyak plugin WordPress Scroll gratis yang tersedia tetapi kami telah menyoroti sebagian besar plugin Smooth scroll yang akan disukai semua pengunjung Anda. Silakan periksa di bawah ini.
1. Halaman gulir ke id :
Gulir Halaman ke id adalah perangkat lunak sumber terbuka yang sepenuhnya dicirikan dan dilengkapi dengan fitur dan fungsionalitas yang dikembangkan dengan baik. Ini memberi Anda efek animasi bergulir yang halus.
Gulir halaman ke plugin id dapat disesuaikan. Dengan bantuan id dan offset disebutkan plugin ini akan menghitung ukuran halaman dan mengaturnya secara otomatis.
2. Menu Tempel (atau Apa Pun!) di Gulir :
Menu lengket (atau apa pun) pada plugin gulir tersedia secara gratis. ini membantu Anda membuat menu atau elemen apa pun menjadi lengket. Setelah Anda mengklik elemen lengket, itu akan langsung menggulir Anda ke bagian atas halaman. Anda hanya memerlukan sedikit atau pengetahuan dasar tentang HTML/CSS untuk mengeluarkan elemen yang benar yang ingin Anda buat lengket.
3. Gulir Tak Terbatas WordPress – Ajax Load More :
Ajax Load more dibuat khusus untuk pengguna WordPress sehingga mereka dapat menggulir situs web dengan lancar. Ajax memuat lebih banyak membantu memuat posting malas, posting tunggal, halaman, dan komentar. Plugin ini paling terkenal untuk plugin eCommerce seperti WooCommerce
4. Tautan Gulir Halus yang Mudah:
Anda dapat membuat fitur dari bawah ke atas sendiri. karena SEasy Smooth Scroll Links adalah plugin yang dapat disesuaikan dan sangat ringan.
Anda hanya perlu memilih salah satu gambar untuk mengatur elemen gulir ke atas. Juga, Anda dapat menyesuaikan posisi elemen ke kiri, tengah, sisi kanan. Plugin ini juga merupakan perangkat lunak sumber terbuka.
5. Gulir Halus MouseWheel :
Plugin MouseWheel Smooth Scroll sangat halus untuk menggulir untuk semua tautan jangkar. Biasanya ditempatkan di sisi kanan yang akan menggulir halaman dari bawah ke atas.
Karenanya plugin ini mendukung RTL dan tidak membuat item menu yang tidak berguna di dasbor WordPress.
6. Gulir Halus oleh WPOS:
Karena plugin Smooth Scroll by WPOS berbobot ringan sehingga orang dapat dengan mudah menyesuaikan gulir dari atas ke bawah di setiap halaman. Anda tidak perlu menulis satu baris kode pun.
Satu dapat menyesuaikan kecepatan animasi, jenis, tinggi, lebar, dll sesuai kebutuhan mereka. Plugin ini bekerja lebih baik dengan pembuat halaman Elementor
7. Tombol Gulir ke Atas Sederhana:
Seseorang dapat menambahkan efek gulir halus ke tautan jangkar tetapi pada halaman yang sama. Efek ini dapat diterapkan ke seluruh posting dan halaman atau ke posting dan halaman tertentu. Anda dapat menemukan pengaturan ini di pengaturan dasbor >> Tombol Gulir ke Atas Sederhana.
– Pilih untuk melamar semua posting dan halaman
– Pilih beranda saja
– Pilih halaman tertentu saja
– Pilih posting tertentu saja
- Tentukan kecepatan gulir
8. NS Smooth scroll kembali ke atas :
Surbma memiliki lebih banyak pengguna aktif. Karena plugin ini juga merupakan gulir yang mulus. Anda bisa mendapatkan efeknya ke setiap tautan jangkar di situs web Anda. Efek gulir halus dapat ditambahkan ke menu atau ke bagian navigasi mana pun.
Anda bahkan tidak perlu menyesuaikannya karena tidak ada opsi yang diberikan untuk plugin ini. Jika Anda memiliki pengetahuan dan pengalaman tentang pemrograman JavaScript dan WordPress, Anda dapat membuat beberapa perubahan sesuai kebutuhan Anda. Tetapi jika Anda tidak memilikinya, saya sarankan Anda tidak menyentuhnya. karena akan mulai bekerja segera setelah menginstal.
9. Gulir WPfront Atas :
Anda dapat dengan mudah menggulir dari bawah ke atas menggunakan Plugin WPFront Scroll Top. Ini sepenuhnya dapat disesuaikan dengan berbagai opsi untuk dipilih. Dengan beberapa animasi, itu akan digulir kembali ke atas.
Anda dapat membuat teks, gambar, dan tombol sendiri. Anda juga dapat memfilter halaman dan posting.
10. Tangkap Gulir Tak Terbatas:
Gulir Tangkap Tak Terbatas akan membantu Anda meningkatkan keterlibatan pengguna di situs web Anda. Alasan utama di baliknya adalah gulir tak terbatas Jetpack. Setelah plugin Anda diinstal dan diaktifkan, pelanggan dan pengguna Anda akan dapat menggulir halaman situs web.
Ini semua adalah Plugin Gulir Halus WordPress Gratis 2022 teratas.