Så här lägger du till en smidig bläddring till Top Effect i WordPress med jQuery

Har du sett webbplatser som lägger till en smidig bläddra till toppen av sidoeffekten? Det här är bra när du har en lång sida, och du vill ge dina användare ett enkelt sätt att komma tillbaka till toppen. Nyligen frågade en av våra läsare om att lägga till en smidig bläddra till topp effekt i WordPress. I den här artikeln visar vi hur du lägger till en smidig bläddra till topp effekt i WordPress med jQuery.

Obs! Denna handledning är skapad för en DIY-mellannvändare som bekvämt redigerar sina teman. Om du vill använda en plugin-metod, använd sedan smidig sida, bläddra till översta plugin. För dem som vill lära sig hur man gör det utan ett plugin, fortsätt sedan läsa.

Vad är glatt rulle och när ska du använda den?

När en sida eller post har mycket innehåll, tvingas användare att rulla ner för att läsa det innehållet. När användarna rullar ner går alla dina navigationslänkar upp. När användarna är färdiga att läsa den artikeln behöver de bläddra för att se vad som ska göras på din webbplats. Scroll to top button skickar snabbt användare till toppen av sidan. Du kan lägga till det som en textlänk utan att använda jQuery, så här:

 ^ Top 

Det skickar bara användare till början av sidan och rullar upp hela sidan i millisekunder. Det är funktionellt, men typiskt som en bump på vägen. Slät rullning är motsatt av det. Det släpper smidigt användaren tillbaka till början av sidan. Detta skapar en bra effekt och förbättrar användarupplevelsen.

Lägger till smidig bläddring till toppeffekt med jQuery i WordPress

För att lägga till en smidig bläddra till topp effekt, använder vi jQuery, en del CSS och en enda rad HTML-kod i ditt WordPress-tema. Öppna först en textredigerare som Anteckningsblock. Skapa en fil och spara den som smoothscroll.js. Kopiera och klistra in den här koden i filen:

 jQuery (dokument) .ready (funktion ($) $ (fönster) .scroll (funktion () om ($ (detta) .scrollTop () < 200)  $('#smoothup') .fadeOut();  else  $('#smoothup') .fadeIn();  ); $('#smoothup').on('click', function() $('html, body').animate(scrollTop:0, 'fast'); return false; ); ); 

Spara filen och ladda upp den till din WordPress temakatalog / Js / mapp (se Så här använder du FTP för att ladda upp filer till WordPress). Om ditt tema inte har en / Js / katalog, skapa sedan en och ladda upp smoothscroll.js till det. Den här koden är jQuery-skriptet som lägger till en smidig rullningseffekt till en knapp som tar användarna till toppen av sidan.

Nästa sak du behöver göra är att lägga till smoothscroll.js till ditt tema. För att göra det bra kommer vi att skicka skriptet i WordPress (läs mer i vår guide om hur du korrekt lägger till skript i WordPress). Kopiera och klistra in den här koden till ditt tema functions.php fil.

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

I ovanstående kod har vi berett WordPress att ladda vårt skript och ladda även jQuery-biblioteket eftersom vårt plugin beror på det. Nu när vi har lagt till jQuery-delen, lägger vi till en faktisk länk till vår WordPress-webbplats som tar användarna tillbaka till toppen. Klistra in den här HTML-adressen, var som helst i ditt tema footer.php fil.

Som du märkte att vi har lagt till en länk men inte har länkat den till någon text. Det beror på att vi kommer att använda en bildikon med uppåtpil för att visa en knapp på baksidan. I det här exemplet använder vi en 40x40px ikon. Lägg till detta i ditt temans stilark.

 #smoothup höjd: 40px; bredd: 40px; läget: fast; botten: 50px; höger: 100px; text-indent: -9999px; display: none; bakgrund: url ("http://www.example.com/wp-content/uploads/2013/07/top_icon.png"); -webkit-övergångs-varaktighet: 0,4s; -moz-övergångs-varaktighet: 0,4s; övergångs-varaktighet: 0,4s;  #smoothup: sväva -webkit-transform: rotera (360deg) bakgrund: url (") no-repeat; 

I CSS ovan har vi använt fast position för vår bildikon och använt en bildikon som bakgrundsbild. Du kan ladda upp din bildikon med hjälp av WordPress Media Uploader och sedan få bildadressen att klistra in den som bakgrundsadress. Vi har också lagt till en liten CSS-animering till knappen som roterar knappen när en användare tar musen över den.

Scroll to top effect tillåter användare att gå tillbaka till toppen och hitta andra saker att göra på din webbplats. En annan sak du kan göra är att lägga till en flytande sidfält som vi har på vår sida för att visa innehållet som visas. Om du inte vill att dina användare ska bläddra till toppen för att dela din artikel, rekommenderar vi starkt att du använder plugin för flytande sociala delningsfält som vi har på WPBeginner.

Vi hoppas att den här artikeln hjälper dig att lägga till en smidig bläddra till toppen av sidoeffekten på din webbplats med jQuery. För att se några andra häftiga användningsområden av jQuery i WordPress kan du titta på vår jQuery FAQ-accordeonartikel eller den lazy loading image-artikeln.

Tror du att bläddra till topp effekt är användbar? Låt oss veta genom att lämna en kommentar nedan.