I migliori plugin gratuiti per WordPress Smooth Scroll 2022
Pubblicato: 2021-11-09
Se hai creato un sito Web ma il contenuto del sito Web è troppo lungo, il che è difficile da capire in questa situazione, puoi utilizzare i plugin Smooth Scroll di WordPress.
I plugin di WordPress Smooth scroll ti aiuteranno a far scorrere il sito Web al rialzo e al ribasso in modo molto fluido. Non solo migliorerà l'esperienza utente del tuo sito web, ma avrà anche un effetto importante sul tasso di conversione. Perché il tuo utente sarà coinvolto sul tuo sito web per un tempo più lungo.
Come aggiungere uno scorrimento uniforme all'effetto Top in WordPress usando jQuery?
Ti chiedi perché vari altri siti Web hanno uno scorrimento fluido verso l'alto dell'effetto pagina? È l'ideale per aggiungere un effetto scorrevole superiore se si dispone di una pagina lunga.
Questo aiuta a migliorare l'esperienza dell'utente sulla tua pagina e, allo stesso tempo, rende più facile per loro tornare rapidamente in alto.
Ora la domanda è: come si aggiunge uno scorrimento fluido all'effetto superiore nel proprio sito WordPress? Bene, puoi farlo facilmente usando jQuery. Qui parleremo di come puoi farlo facilmente usando jQuery. Continuare a leggere:
Cos'è Smooth Scroll e quando usarlo?
Nel caso in cui una pagina o un post abbia molti contenuti, gli utenti sono tenuti a scorrere verso il basso per leggerli tutti. Quando gli utenti iniziano a scorrere verso il basso, i tuoi collegamenti di navigazione iniziano a salire.
Quando l'utente ha finito di leggere, deve scorrere per vedere se è rimasto qualcosa per lui/lei. Lo scorrimento fino al pulsante in alto consente al lettore di andare rapidamente all'operazione. Puoi optare per l'aggiunta di questo link di testo senza la necessità di utilizzare jQuery.
<a href="#" title="Torna all'inizio">^Inizio</a>
Invierà i lettori in cima alla pagina mentre scorrono verso l'alto in una frazione di secondo. Funziona come funzionale.
Tuttavia, lo scorrimento regolare è l'opposto di questo. Lo scorrimento regolare aiuta l'utente a tornare all'area superiore della pagina. Questo aiuta a migliorare l'esperienza degli utenti sul tuo sito.
Aggiunta di scorrimento fluido all'effetto superiore con jQuery in WordPress?
Se vuoi aggiungere uno scorrimento uniforme all'effetto superiore, puoi usare jQuery. Allo stesso tempo, dovrai aggiungere alcuni CSS insieme a una singola riga per il codice HTML sul tema del tuo WordPress.
Per iniziare con esso in un primo momento è necessario aprire un editor di testo, come Blocco note. Ora devi creare un file e andare avanti per salvarlo come smoothscroll.js. Ora devi copiare e incollare un codice nell'area del file:
jQuery(documento).ready(funzione($){
$(finestra).scorri(funzione(){
se ($(questo).scrollTop() < 200) {
$('#smoothup') .fadeOut();
}
altro {
$('#smoothup') .fadeIn();
}
});
$('#smoothup').on('click', funzione(){
$('html, body').animate({scrollTop:0}, 'veloce');
restituire falso;
});
});
Ora devi salvare il file. Dopodiché puoi caricarlo nella cartella /js /cartella della directory del tema di WordPress. Nel caso in cui il tuo tema non abbia una directory /js/, devi iniziare a crearne una.
Dopodiché puoi caricare smoothscroll.js in questa directory. Questo codice viene chiamato script jQuery, che aggiungerà un effetto di scorrimento fluido al pulsante. Fondamentalmente aiuterà l'utente ad andare senza problemi nella parte superiore della pagina.
Dopodiché devi aggiungere questo smoothscroll.js alla tua area tematica. Se vuoi farlo devi aggiungere uno script in WordPress. Ecco lo script o il cod che devi incollare nel file functions.php del tuo tema:
wp_enqueue_script('smooth up', get_template_directory_uri() . '/js/smoothscroll.js', array('jquery' ), ”, true );
Questo codice invia a WordPress il comando lo script. Allo stesso tempo, dice anche a WordPress di caricare la libreria jQuery poiché il plugin dipende da essa.
Quando hai finito con l'aggiunta della parte jQuery, ora devi aggiungere il collegamento effettivo al sito di word press, che riporterà l'utente nell'area in alto. Devi incollare un codice HTML ovunque nel file footer.php del tuo tema:
<a href="#top" title="Torna all'inizio"></a>
Questo passaggio include l'aggiunta del collegamento al file ma non è collegato ad alcun testo. È così, perché è necessario utilizzare un'icona dell'immagine sulla freccia verso l'alto che ti consentirà di visualizzare un pulsante per tornare in alto.
Ecco come puoi aggiungere un'icona 40x40px al foglio di stile del tuo tema:
#lisciare {
altezza: 40px;
larghezza: 40px;
posizione:fissa;
in basso: 50px;
a destra: 100px;
rientro testo:-9999px;
display:nessuno;
sfondo: url("http://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-durata-transizione-webkit: 0,4s;
-moz-transizione-durata: 0,4 s; durata della transizione: 0,4 s;
}
#smoothup:passa il mouse {
-webkit-transform: ruota (360 gradi) }
sfondo: url('') no-repeat;
}
Nel CSS sopra menzionato, hai optato per la ciliegina sulla posizione dell'icona dell'immagine. Include anche l'utilizzo di un'icona immagine come immagine di sfondo. Ora devi caricare l'icona della tua immagine con l'aiuto dell'uploader multimediale di WordPress.
Quindi puoi ottenere l'URL dell'immagine che devi incollare come URL di sfondo. Poiché hai aggiunto un'animazione CSS al pulsante che continua a ruotare il pulsante, l'utente mantiene il puntatore del mouse sul pulsante.
Ora devi scorrere fino all'effetto in alto, che consentirà agli utenti di tornare all'area in alto e trovare cos'altro possono fare sul tuo sito web.
Puoi anche aggiungere un piè di pagina mobile per visualizzare facilmente i contenuti della funzione. Nel caso in cui non desideri che i tuoi utenti scorrano nell'area in alto per condividere l'articolo, puoi utilizzare il plug-in mobile della barra di condivisione sociale per renderlo molto più gestibile.
Plugin di scorrimento fluido del 2022: molto leggeri e veloci
I plugin Smooth Scroll di WordPress funzioneranno sicuramente in modo molto più veloce ed efficace su tutti gli altri dispositivi e browser senza alcuna difficoltà.
Inoltre, funziona benissimo con altri plugin come Yoast SEO, Contact Form 7, NextGen Gallery, Slider Revolution, WooCommerce, SKT page builder, Visual Composer ed Elementor e molti altri.
Siti Web aziendali su larga scala o su piccola scala come blog, sito Web portfolio, sito Web di consulenza, sito Web aziendale, sito Web relativo all'e-commerce, sito Web di agenzia creativa, sito Web immobiliare, CV personale, sito Web di società di vendita al dettaglio, ecc. È possibile utilizzare i plug-in Smooth Scroll di WordPress per migliorare il look and feel del sito web.
Sono disponibili molti plug-in WordPress Scroll gratuiti, ma abbiamo evidenziato la maggior parte dei plug-in Smooth scroll che tutti i tuoi visitatori apprezzeranno. Si prega di controllare di seguito.
1. Scorri la pagina fino a id:
Il Page scroll to id è un software open source completamente caratterizzato e dotato di caratteristiche e funzionalità ben sviluppate. Ti dà un effetto di animazione a scorrimento fluido.
Il plugin di scorrimento della pagina per id è regolabile. Con l'aiuto di id e offset menzionati, questo plugin calcolerà la dimensione della pagina e la imposterà automaticamente.
2. Menu permanente (o qualsiasi cosa!) su Scroll:
Il menu appiccicoso (o qualsiasi altra cosa) sul plug-in di scorrimento è disponibile gratuitamente. ti aiuta a rendere appiccicoso un menu o qualsiasi elemento. Dopo aver fatto clic su un elemento appiccicoso, ti scorrerà direttamente nella parte superiore della pagina. Hai solo bisogno di alcune o conoscenze di base di HTML/CSS per eliminare l'elemento corretto che vuoi rendere appiccicoso.
3. Scorrimento infinito di WordPress – Ajax Carica di più:
Ajax Load more è stato creato appositamente per un utente WordPress in modo che possa scorrere agevolmente il sito Web. Ajax load more aiuta a caricare post pigri, post singoli, pagine e commenti. Questi plugin sono più conosciuti per i plugin di eCommerce come WooCommerce
4. Collegamenti di scorrimento facili e fluidi:
Puoi creare da solo una funzione dal basso verso l'alto. perché SEasy Smooth Scroll Links è un plugin personalizzabile e molto leggero.
Devi solo scegliere una qualsiasi delle immagini per impostare gli elementi di scorrimento. Inoltre, puoi regolare la posizione dell'elemento a sinistra, al centro, a destra. Questo plugin è anche un software open source.
5. Scorrimento fluido della rotellina del mouse:
Il plug-in MouseWheel Smooth Scroll è molto fluido da scorrere per tutti i link di ancoraggio. Di solito è posizionato sul lato destro che farà scorrere la pagina dal basso verso l'alto.
Quindi questo plugin supporta RTL e non crea voci di menu inutili nella dashboard di WordPress.
6. Scorrimento fluido di WPOS:
Poiché il plug-in Smooth Scroll di WPOS è leggero, è possibile personalizzare facilmente lo scorrimento dall'alto verso il basso su ogni pagina. Non è necessario scrivere nemmeno una singola riga di codice.
Si può regolare la velocità dell'animazione, il tipo, l'altezza, la larghezza, ecc. In base alle proprie esigenze. Questo plugin funziona meglio con il page builder Elementor
7. Semplice scorrimento al pulsante in alto:
È possibile aggiungere un effetto di scorrimento uniforme al collegamento di ancoraggio ma sulla stessa pagina. Questi effetti possono essere applicati a tutti i post e alla pagina oa determinati post e pagine. Puoi trovare questa impostazione nelle impostazioni del dashboard>>Scorrimento semplice fino al pulsante in alto.
– Scegli per richiedere tutti i post e le pagine
– Scegli solo la home page
– Scegli solo le pagine particolari
– Scegli solo i post specifici
– Decidere la velocità di scorrimento
8. NS Smooth scorrere indietro verso l'alto:
La Surbma ha utenti più attivi. Poiché questo plugin è anche uno scorrimento fluido. Puoi ottenere l'effetto su ogni collegamento di ancoraggio sul tuo sito web. È possibile aggiungere un effetto di scorrimento uniforme al menu o a qualsiasi parte di navigazione.
Non è nemmeno necessario personalizzarlo perché non è disponibile alcuna opzione per questo plug-in. Se hai conoscenza ed esperienza sulla programmazione JavaScript e WordPress puoi apportare alcune modifiche secondo le tue necessità. Ma se non ce l'hai ti suggerisco di non toccarlo. poiché inizierà a funzionare immediatamente dopo l'installazione.
9. Scorrimento anteriore WPF:
Puoi scorrere facilmente dal basso verso l'alto usando WPFront Scroll Top Plugin. È completamente personalizzabile con diverse opzioni tra cui scegliere. Con alcune animazioni, verrà riportato in alto.
Puoi creare testo, immagini e pulsanti da solo. inoltre puoi filtrare pagine e post.
10. Cattura scorrimento infinito:
Catch Infinite scroll ti aiuterà ad aumentare il coinvolgimento degli utenti sul tuo sito web. Il motivo principale alla base è uno scroll infinito di Jetpack. Una volta installati e attivati i plugin, il cliente e l'utente potranno scorrere la pagina del sito web.
Questi sono tutti i migliori plugin gratuiti per WordPress Smooth Scroll 2022.