Cum de a adăuga o derulare netedă la Top Effect în WordPress folosind jQuery

Ați văzut site-uri care adaugă o derulare netedă la efectul de vârf al paginii? Acest lucru este grozav atunci când aveți o pagină lungă și doriți să oferiți utilizatorilor dvs. o modalitate ușoară de a vă întoarce la început. Recent, unul dintre cititorii noștri ne-a întrebat despre adăugarea unei paranteze netede la efectul de top în WordPress. În acest articol, vă vom arăta cum să adăugați o parcurgere netedă la efectul de top în WordPress folosind jQuery.

Notă: Acest tutorial este creat pentru un utilizator intermediar DIY care își editează confortabil temele. Dacă doriți să utilizați o metodă de plugin, atunci vă rugăm să utilizați o pagină de derulare netedă în plugin-ul de top. Pentru cei care vor să învețe cum să facă acest lucru fără un plugin, atunci continuați să citiți.

Ce este Smooth Scroll și Când să-l folosești?

Atunci când o pagină sau o postare are o mulțime de conținut, utilizatorii sunt obligați să deruleze în jos pentru a citi acel conținut. Pe măsură ce utilizatorii scot în jos, toate linkurile dvs. de navigare cresc. Când utilizatorii au terminat de citit acel articol, ei trebuie să se rotească în sus pentru a vedea ce altceva de făcut pe site-ul tău. Derulați până la butonul de sus trimite rapid utilizatorii în partea de sus a paginii. Puteți adăuga acest lucru ca un link text fără a utiliza jQuery, cum ar fi:

 ^ Sus 

Pur și simplu trimite utilizatorii în partea de sus a paginii și derulează întreaga pagină în milisecunde. Este funcțional, dar un fel de bum pe drum. Parcurgerea netedă este opusă. Acesta leagă ușor utilizatorul înapoi în partea de sus a paginii. Acest lucru creează un efect plăcut și îmbunătățește experiența utilizatorului.

Adăugarea unei mutări netede la Top Effect cu jQuery în WordPress

Pentru a adăuga o derulare netedă la efectul de top, vom folosi jQuery, unele CSS și o singură linie de cod HTML în tema WordPress. Mai întâi deschideți un editor de text ca Notepad. Creați un fișier și salvați-l ca smoothscroll.js. Copiați și inserați acest cod în fișier:

 jQuery (document) .ready (funcția ($) $ (fereastra) .scroll (funcția () if ($ (this) .scrollTop < 200)  $('#smoothup') .fadeOut();  else  $('#smoothup') .fadeIn();  ); $('#smoothup').on('click', function() $('html, body').animate(scrollTop:0, 'fast'); return false; ); ); 

Salvați fișierul și încărcați-l în directorul temă WordPress / Js / (consultați Cum se utilizează FTP pentru a încărca fișiere în WordPress). Dacă tema dvs. nu are a / Js / director, apoi creați unul și încărcați smoothscroll.js la el. Acest cod este scriptul jQuery care va adăuga efectul de derulare netedă la un buton care duce utilizatorii în partea de sus a paginii.

Următorul lucru pe care trebuie să-l faceți este să adăugați smoothscroll.js la tema ta. Pentru a face acest lucru frumos, vom enqueue script în WordPress (aflați mai multe în ghidul nostru cu privire la modul de a adăuga corect script-uri în WordPress). Copiați și inserați acest cod în tema proprie functions.php fişier.

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

În codul de mai sus, am spus lui WordPress să încarce scriptul nostru și să încarce biblioteca jQuery, deoarece plugin-ul depinde de el. Acum, că am adăugat partea jQuery, permiteți adăugarea unui link real către site-ul nostru WordPress care duce utilizatorii înapoi în partea de sus. Inserați acest HTML în orice loc în tema proprie footer.php fişier.

După cum ați observat că am adăugat o legătură, dar nu l-am conectat la nici un text. Asta pentru că vom folosi o pictogramă de imagine cu săgeată în sus pentru a afișa un buton din spate sus. În acest exemplu, folosim o pictogramă de 40x40px. Adăugați acest lucru în foaia de stil a temei.

 #smoothup height: 40px; lățime: 40px; Poziția: fix; bottom: 50px; dreapta: 100px; text-liniuță: -9999px; display: none; background: url ("http://www.example.com/wp-content/uploads/2013/07/top_icon.png"); -webkit-transition-duration: 0.4s; -moz-tranziție-durată: 0,4s; durata de tranziție: 0,4 s;  #smoothup: hover -webkit-transform: rotate (360deg) fundal: url (") no-repeat; 

În CSS de mai sus, am folosit poziția fixă ​​pentru pictograma noastră de imagine și am folosit o pictogramă imagine ca imagine de fundal. Puteți să încărcați pictograma de imagine utilizând aplicația de încărcare a conținutului WordPress și apoi să obțineți adresa URL a imaginii pentru al lipi ca adresă URL de fundal. Am adăugat, de asemenea, o mică animație CSS la butonul care rotește butonul când un utilizator ia mouse-ul peste el.

Derulați până la efectul de top permite utilizatorilor să se întoarcă în partea de sus și să găsească alte lucruri de făcut pe site-ul dvs. Web. Un alt lucru pe care îl puteți face este să adăugați o bară de subsol plutitoare ca pe site-ul nostru pentru a afișa conținutul recomandat. Dacă nu doriți ca utilizatorii dvs. să se deplaseze în sus pentru a vă permite accesul la articolul dvs., vă recomandăm să utilizați pluginul plutitor pentru partajarea socială, așa cum îl avem pe WPBeginner.

Sperăm că acest articol v-a ajutat să adăugați o parcurgere netedă la efectul de vârf al paginii pe site-ul dvs. folosind jQuery. Pentru a vedea câteva alte utilizări minunate ale programului jQuery în WordPress, vă puteți uita la articolul nostru despre acorduri jQuery FAQ sau la articolele de încărcare leneș.

Credeți că este utilă defilarea la efectul de top? Spuneți-ne, lăsând un comentariu mai jos.