Hoe voeg je een vloeiend schuiven toe aan topeffect in WordPress met jQuery

Heb je websites gezien die een vloeiend scrollen naar het effect boven aan de pagina toevoegen? Dit is geweldig als u een lange pagina heeft en u uw gebruikers een gemakkelijke manier wilt geven om weer bovenaan te komen. Onlangs vroeg een van onze lezers ons over het toevoegen van een soepel scroll naar top effect in WordPress. In dit artikel laten we u zien hoe u een vloeiend scrollen naar topeffect in WordPress met behulp van jQuery.

Opmerking: deze zelfstudie is gemaakt voor een doe-het-zelver tussen gebruiker die comfortabel zijn thema's kan bewerken. Als u een plugin-methode wilt gebruiken, gebruik dan de scroll-naar-boven-plug-in voor vloeiende pagina's. Voor degenen die willen leren hoe dit te doen zonder een plug-in, ga dan verder met lezen.

Wat is Smooth Scroll en Wanneer gebruiken?

Wanneer een pagina of bericht veel inhoud bevat, worden gebruikers gedwongen naar beneden te scrollen om die inhoud te lezen. Terwijl gebruikers naar beneden scrollen, gaan al uw navigatielinks omhoog. Wanneer gebruikers klaar zijn met het lezen van dat artikel, moeten ze naar boven scrollen om te zien wat ze nog meer op uw website kunnen doen. Scroll naar de bovenste knop om gebruikers snel naar de bovenkant van de pagina te sturen. U kunt dit als een tekstlink toevoegen zonder jQuery te gebruiken, zoals dit:

 ^ Top 

Het stuurt gebruikers naar de bovenkant van de pagina en schuift de hele pagina in milliseconden omhoog. Het is functioneel, maar een beetje een hobbel op de weg. Gladde scroll is het tegenovergestelde daarvan. Het plaatst de gebruiker vlot terug naar de bovenkant van de pagina. Dit zorgt voor een leuk effect en verbetert de gebruikerservaring.

Smooth Scroll to Top Effect toevoegen met jQuery in WordPress

Om een ​​soepel scroll naar top effect toe te voegen, zullen we jQuery, enkele CSS en een enkele regel HTML-code in uw WordPress-thema gebruiken. Open eerst een teksteditor zoals Notepad. Maak een bestand en sla het op als smoothscroll.js. Kopieer en plak deze code in het bestand:

 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; ); ); 

Sla het bestand op en upload het naar uw WordPress themadirectory's / Js / map (zie FTP gebruiken om bestanden naar WordPress te uploaden). Als je thema geen a heeft / Js / directory, maak er dan een aan en upload smoothscroll.js ernaar toe. Deze code is het jQuery-script dat een soepel scrolleffect aan een knop toevoegt die gebruikers naar de bovenkant van de pagina brengt.

Het volgende dat u hoeft te doen is het toevoegen van de smoothscroll.js naar jouw thema. Om dat goed te doen, zullen we het script in WordPress in wachtrij plaatsen (lees meer in onze handleiding over het correct toevoegen van scripts in WordPress). Kopieer en plak deze code in uw thema's functions.php het dossier.

 wp_enqueue_script ('smoothup', get_template_directory_uri (). '/js/smoothscroll.js', array ('jquery'), ", true); 

In de bovenstaande code hebben we WordPress verteld om ons script te laden en ook de jQuery-bibliotheek te laden, omdat onze plug-in ervan afhangt. Nu we het onderdeel jQuery hebben toegevoegd, kunnen we een echte link toevoegen aan onze WordPress-site die gebruikers terugbrengt naar de top. Plak deze HTML overal in uw thema's footer.php het dossier.

Zoals je hebt gemerkt, hebben we een link toegevoegd maar deze niet aan een tekst gekoppeld. Dat komt omdat we een pictogram met een pijl omhoog gebruiken om een ​​knop 'Terug naar boven' weer te geven. In dit voorbeeld gebruiken we een 40x40px-pictogram. Voeg dit toe aan de stylesheet van uw thema.

 #smoothup height: 40px; breedte: 40px; position: fixed; bottom: 50px; rechts: 100px; text-indent: -9999px; Geen weergeven; achtergrond: url ("http://www.example.com/wp-content/uploads/2013/07/top_icon.png"); -webkit-overgang-duur: 0.4s; -moz-overgang-duur: 0,4s; overgangsduur: 0.4s;  #smoothup: hover -webkit-transform: rotate (360deg) background: url (") no-repeat; 

In de bovenstaande CSS hebben we een vaste positie voor ons afbeeldingspictogram gebruikt en een afbeeldingspictogram als achtergrondafbeelding gebruikt. U kunt uw afbeeldingspictogram uploaden met behulp van de WordPress media-uploader en vervolgens de afbeeldings-URL ophalen om deze als achtergrond-URL te plakken. We hebben ook een kleine CSS-animatie toegevoegd aan de knop die de knop draait wanneer een gebruiker er met de muis overheen gaat.

Scroll naar top effect stelt gebruikers in staat om terug te gaan naar de top en andere dingen te doen op uw website te vinden. Een ander ding dat je kunt doen is een zwevende voettekstbalk toe te voegen zoals we op onze site hebben om aanbevolen inhoud weer te geven. Als je niet wilt dat je gebruikers naar boven scrollen om je artikel te delen, raden we je ten zeerste aan om de plug-in voor de zwevende sociale share-balk te gebruiken zoals we die hebben op WPBeginner.

We hopen dat dit artikel u heeft geholpen om met behulp van jQuery een vloeiend schuiven naar het effect aan de bovenkant van de pagina op uw site toe te voegen. Om een ​​aantal andere coole gebruiken van jQuery in WordPress te zien, kun je ons jQuery FAQ-accordeonartikel of het artikel over luie laadplaten bekijken.

Denkt u dat scroll naar top effect nuttig zijn? Laat het ons weten door hieronder een reactie achter te laten.