Slik legger du til en jevn rulle til topp effekt i WordPress ved hjelp av jQuery

Har du sett nettsteder som legger til en jevn rulle til toppen av sideeffekten? Dette er flott når du har en lang side, og du vil gi brukerne en enkel måte å komme tilbake til toppen. Nylig spurte en av våre lesere om å legge til en jevn bla til topp effekt i WordPress. I denne artikkelen vil vi vise deg hvordan du legger til en jevn bla til øverste effekt i WordPress ved hjelp av jQuery.

Merk: Denne opplæringen er opprettet for en DIY mellombruker som komfortabelt redigerer temaene sine. Hvis du vil bruke en plugin-metode, bruk så jevn side bla til øverste plugin. For de som ønsker å lære å gjøre dette uten et plugin, så fortsett å lese.

Hva er glatt rulle og når skal du bruke den?

Når en side eller et innlegg har mye innhold, blir brukerne tvunget til å bla ned for å lese innholdet. Som brukere ruller ned, går alle navigasjonslinkene dine opp. Når brukerne er ferdige med å lese den artikkelen, må de rulle opp for å se hva annet å gjøre på nettstedet ditt. Rull til toppknapp sender raskt brukere til toppen av siden. Du kan legge til dette som en tekstkobling uten å bruke jQuery, slik:

 ^ Topp 

Det sender bare brukere til toppen av siden og ruller opp hele siden i millisekunder. Det er funksjonelt, men litt som en bump på veien. Glatt rulle er motsatt av det. Det glir glatt brukeren tilbake til toppen av siden. Dette skaper en fin effekt og forbedrer brukeropplevelsen.

Legge til jevn rulle til topp effekt med jQuery i WordPress

For å legge til en jevn rulle til topp effekt, bruker vi jQuery, noen CSS og en enkelt linje med HTML-kode i WordPress-temaet. Først åpner du et tekstredigeringsprogram som Notisblokk. Lag en fil og lagre den som smoothscroll.js. Kopier og lim inn denne koden i filen:

 jQuery (dokument) .ready (funksjon ($) $ (vindu) .scroll (funksjon () hvis ($ (dette) .scrollTop () < 200)  $('#smoothup') .fadeOut();  else  $('#smoothup') .fadeIn();  ); $('#smoothup').on('click', function() $('html, body').animate(scrollTop:0, 'fast'); return false; ); ); 

Lagre filen og last den opp til WordPress-temakatalogen / Js / mappe (se Slik bruker du FTP til å laste opp filer til WordPress). Hvis temaet ditt ikke har en / Js / katalog, og opprett en og last opp smoothscroll.js til det. Denne koden er jQuery-skriptet som vil legge til glatt rulleffekt til en knapp som tar brukerne til toppen av siden.

Neste ting du trenger å gjøre er å legge til smoothscroll.js til temaet ditt. For å gjøre det bra, vil vi skape skriptet i WordPress (les mer i vår veiledning om hvordan du skikkelig legger til skript i WordPress). Kopier og lim inn denne koden til temaet ditt functions.php fil.

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

I ovennevnte kode har vi fortalt WordPress å laste inn vårt skript og også laste inn jQuery-biblioteket siden vår plugin er avhengig av den. Nå som vi har lagt til jQuery-delen, kan vi legge til en faktisk kobling til vårt WordPress-nettsted som tar brukerne tilbake til toppen. Lim inn denne HTML-en hvilken som helst i ditt tema footer.php fil.

Som du la merke til at vi har lagt til en lenke, men ikke har koblet den til noen tekst. Det er fordi vi skal bruke et bildeikon med pil oppover for å vise en tilbake til toppen-knappen. I dette eksemplet bruker vi et 40x40px ikon. Legg dette til temaets stilark.

 #smoothup høyde: 40px; bredde: 40px; stilling: fast; bunn: 50 piksler; høyre: 100px; text-indent: -9999px; display: none; bakgrunn: url ("http://www.example.com/wp-content/uploads/2013/07/top_icon.png"); -webkit-overgangsperiode: 0,4s; -moz-overgangs-varighet: 0,4s; Overgangsperiode: 0,4s;  #smoothup: svever -webkit-transform: roter (360deg) bakgrunn: url (") no-repeat; 

I CSS ovenfor har vi brukt fast posisjon for vårt bildeikon og brukt et bildeikon som bakgrunnsbilde. Du kan laste opp bildeikonet ditt ved hjelp av WordPress Media Uploader og deretter få bildeadressen til å lime den inn som bakgrunnsadressen. Vi har også lagt til en liten CSS animasjon til knappen som roterer knappen når en bruker tar musen over den.

Scroll to top effect lar brukerne gå tilbake til toppen og finne andre ting å gjøre på nettstedet ditt. En annen ting du kan gjøre, er å legge til en flytende footer-bar som vi har på nettstedet vårt for å vise innholdet som vises. Hvis du ikke vil at brukerne skal rulle til toppen for å dele artikkelen din, anbefaler vi sterkt at du bruker den flytende sosiale delelinjen plugin som vi har på WPBeginner.

Vi håper denne artikkelen hjalp deg med å legge til en jevn bla til toppen av sideeffekten på nettstedet ditt ved hjelp av jQuery. For å se noen andre kule bruksområder av jQuery i WordPress kan du se på vår jQuery FAQ-trekkspesifikasjonsartikkel eller den lette laste bildedelen artikkelen.

Tror du at rulle til topp effekt er nyttig? Gi oss beskjed ved å legge igjen en kommentar nedenfor.