Hur man lägger till en smidig scroll till toppen-effekt i WordPress med jQuery

Har du någonsin scrollat igenom ett långt WordPress-blogginlägg eller en produktsida på din telefon, bara för att inse att du var tvungen att svepa hela vägen upp bara för att hitta menyn? Dina besökare kanske känner likadant.

På längre sidor kan den lilla olägenheten snabbt bli frustration. Och vissa kanske helt enkelt lämnar din WordPress-webbplats istället för att navigera tillbaka.

En jämn scroll-till-toppen-knapp kan hjälpa dig att åtgärda detta omedelbart. Den här funktionen ger läsarna ett snabbt sätt att hoppa tillbaka upp, vilket kan hålla dem engagerade och uppmuntra dem att utforska mer av din webbplats.

I den här guiden delar vi exakt hur du lägger till en smidig scroll-till-topp-effekt i WordPress med jQuery. Oroa dig inte, det är enklare än du tror! 💡

Vad är smidig scrollning och när ska du använda det?

Mjuk scroll är en navigationseffekt som flyttar sidan upp eller ner i en jämn, flytande rörelse istället för att hoppa omedelbart till en sektion.

Om inte webbplatsen har en fast meny i sidhuvudet, måste användare som scrollar till slutet av ett långt WordPress-inlägg eller en sida manuellt svepa eller scrolla sig tillbaka till toppen för att navigera på webbplatsen.

Det kan vara ett verkligt irritationsmoment, och ofta kommer användare helt enkelt att klicka på tillbaka-knappen och lämna. Det är därför du behöver en knapp för att snabbt skicka användare till toppen av inlägget eller sidan.

Vanligtvis kan du lägga till denna funktionalitet som en enkel textlänk utan att använda jQuery, så här:

<a href="#" title="Back to top">^Top</a>

Det skickar användare till toppen genom att rulla upp hela sidan på millisekunder. Det fungerar, men effekten kan vara skakig, lite som när man kör över ett gupp i vägen.

En mjuk scroll är motsatsen till det. Den kommer att glida användaren tillbaka till toppen med en visuellt tilltalande effekt. Att använda element som detta kan drastiskt förbättra användarupplevelsen på din webbplats.

Med det i åtanke kommer vi att dela två metoder för att lägga till en smidig scroll-till-topp-effekt på din WordPress-webbplats med hjälp av ett plugin och jQuery. Här är en snabb översikt över allt vi kommer att täcka i den här guiden:

Utan vidare dröjsmål, låt oss börja med den första metoden.

Tips 1: Lägga till en mjuk scroll-till-topp-effekt med ett WordPress-plugin

Denna metod rekommenderas för nybörjare eftersom den låter dig lägga till en scroll-till-topp-effekt till en WordPress-webbplats utan att röra en enda kodrad.

Det första du behöver göra är att installera och aktivera WPFront Scroll Top-pluginet. Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering kan du gå till Inställningar » Scrolla till toppen från din WordPress-instrumentpanel. Här kan du konfigurera pluginet och anpassa den mjuka scrollningseffekten.

Härifrån är det första du behöver göra att klicka på kryssrutan 'Aktiverad' för att aktivera scroll-till-topp-knappen på din webbplats. Därefter ser du alternativ för att redigera scroll-offset, knappstorlek, opacitet, blekningsvaraktighet, scrollvaraktighet och mer.

Om du scrollar ner hittar du fler alternativ, som att redigera tiden för automatisk döljning och aktivera alternativet att dölja knappen på små enheter eller på wp-admin-skärmen.

Du kan också redigera vad knappen gör när du klickar på den. Som standard kommer den att scrolla till toppen av sidan, men du kan ändra den till att scrolla till ett specifikt element i inlägget eller till och med länka till en sida.

Dessutom kan du justera knappens placering. Medan den vanligtvis visas i det nedre högra hörnet av skärmen, har du möjlighet att flytta den till vilket annat hörn som helst.

WPFront Scroll Top-pluginet erbjuder filter för att visa knappen 'scroll-to-top' endast på utvalda sidor.

Normalt kommer den att visas på alla sidor på din WordPress-blogg.

Du kan dock navigera till avsnittet 'Visa på sidor' och välja var du vill visa effekten av att scrolla till toppen.

Pluginet erbjuder också förbyggda knappdesigner. Du bör enkelt kunna hitta en design som matchar din webbplats.

Om du inte kan hitta en färdig bildknapp som fungerar för dig, finns det ett alternativ att ladda upp en anpassad bild från WordPress mediabibliotek.

När du är klar klickar du helt enkelt på knappen ‘Spara ändringar’.

Du kan nu besöka din WordPress-webbplats för att se scroll-till-topp-knappen i aktion.

Tips 2: Lägga till mjuk scroll-till-topp-effekt med jQuery i WordPress

I den här metoden lägger vi till den mjuka scroll-till-topp-effekten med jQuery, lite CSS och en enda rad HTML-kod. Vårt team har manuellt testat och verifierat exakt denna kodsnutt på en ny WordPress-installation för att säkerställa att den fungerar utan att bryta temats funktionalitet.

Med det sagt, många handledningar kommer att få dig att redigera dina temafiler för att lägga till en mjuk scroll-till-topp-knapp. Men det är inte särskilt nybörjarvänligt – även ett litet misstag kan bryta din webbplats.

Det är därför vi rekommenderar att använda WPCode när du vill lägga till anpassad funktionalitet som en mjuk scrollningseffekt. Det är det bästa pluginet för kodavsnitt för WordPress, och det låter dig säkert lägga till anpassade avsnitt – allt utan att röra dina temafiler.

Några av våra partner varumärken använder WPCode för att lägga till och hantera sina anpassade kodavsnitt, och det fungerar riktigt bra.

För att lära dig mer om det kan du kolla in vår fullständiga WPCode-recension för att se alla dess funktioner.

Först måste du installera och aktivera det kostnadsfria WPCode-pluginet. Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.

När den har aktiverats, gå till Code Snippets » + Add Snippet från din WordPress-instrumentpanel.

På nästa skärm ser du WPCode-kodbiblioteket.

Klicka på ‘Använd avsnitt’ under ‘Lägg till din anpassade kod (anpassat avsnitt)’.

En popup visas för att fråga om din kodtyp.

Se till att välja ‘JavaScript-avsnitt’.

Nu när du är i kodredigeraren, låt oss först ge ditt anpassade kodavsnitt ett tydligt namn. Detta är endast för din referens, men vi rekommenderar att använda ett tydligt, beskrivande namn.

Klistra sedan in följande kod i rutan ‘Kodförhandsgranskning’:

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

Detta jQuery-skript gör allt det tunga arbetet för din mjuka scrollningseffekt.

Först döljer den knappen tills användaren scrollar ner 200 pixlar. När användaren klickar på knappen animerar skriptet mjukt sidan tillbaka till 0 pixlar (allra högst upp).

Vi inkluderade också en return false;-rad för att förhindra standardbeteendet för HTML-länkar, vilket omedelbart skulle hoppa användaren till toppen och förstöra animationen.

Här är hur det kan se ut på din skärm:

Rulla sedan ner till sektionen 'Infogning'.

Först, se till att du har ‘Auto Insert’ valt. Detta säkerställer att avsnittet körs automatiskt på din webbplats utan att kräva manuell placering.

Kontrollera sedan platsen.

Det finns många alternativ att välja mellan, inklusive header, footer, navigeringsmeny och mer. För en knapp för att scrolla till toppen är ‘Site Wide Footer’ ett utmärkt alternativ eftersom det säkerställer att knappen är tillgänglig på alla sidor utan att störa ditt webbplatsinnehåll.

När det är gjort kan du växla omkopplaren till ‘Active’ så att skriptet börjar köras omedelbart på din webbplats.

Och efter det, glöm inte att klicka på knappen ‘Save Snippet’ för att aktivera skriptet.

Nu när vi har lagt till jQuery, låt oss lägga till en faktisk länk till vår WordPress-webbplats som tar användarna tillbaka till toppen.

För att göra detta, lägg helt enkelt till denna HTML i din webbplats footer med WPCode.

Gå till Code Snippets » Header & Footer och lägg till detta avsnitt i ‘Footer’-området:

<a href="#top" id="smoothup" title="Back to top"></a>

Glöm inte att klicka på ‘Save Changes’ när du är klar. Om du behöver hjälp, se vår handledning om hur man lägger till header- och footerkod i WordPress

Om du tittar på din webbplats just nu ser du ingen knapp. Det beror på att vår HTML-kod innehåller en länk, men ingen ankaretext. Den är för närvarande helt osynlig.

För att åtgärda detta kommer vi att använda en bildikon (som en uppåtpil) för att visa en knapp för att gå tillbaka till toppen. För detta behöver du lägga till en anpassad CSS.

Du kan lägga till CSS i ditt temas stilmall eller via WPCode. Att använda WPCode är säkrare eftersom det inte går förlorat om du uppdaterar ditt tema.

Innan du lägger till koden måste du:

1. Ladda upp en bildikon (som en pil) till ditt WordPress mediebibliotek. Storleken kan vara vad som helst som fungerar bäst för din webbplats – vi använde 40x40px som exempel. Om du använder en annan storlek, se till att ändra värdena för höjd och bredd i CSS-koden nedan.
2. Kopiera bildens URL som du just laddade upp. Se sedan till att du ersätter den falska bildens URL (https://www.example.com/wp-content/uploads/2013/07/top_icon.png) i CSS-utdraget nedan med din faktiska bildens URL.

Detta säkerställer att din knapp för att rulla till toppen visas korrekt och har effekten av rotation vid hovring.

Låt oss nu navigera till Kodavsnitt » + Lägg till avsnitt.

Därefter kan du hovra över 'Lägg till din anpassade kod (anpassat avsnitt)'.

Klicka på knappen 'Använd avsnitt' när den visas.

I popup-fönstret som visas måste du välja en kodtyp.

Låt oss välja 'CSS-utdrag'.

I redigeraren, ge ditt anpassade kodavsnitt ett tydligt namn för enkel organisation.

Lägg sedan till följande anpassade CSS-kod i rutan 'Kodförhandsgranskning':

<pre class="wp-block-syntaxhighlighter-code">#smoothup {
    height: 40px;
    width: 40px;
    position: fixed;
    bottom: 50px;
    right: 20px;
    text-indent: -9999px;
    display: none;
    background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png");
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

#smoothup:hover {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}</pre>

Denna CSS ställer in den på en fast ikonstorlek och position, samt lägger till en liten hovringsanimering som roterar knappen.

Du behöver inte redigera något i Infogning. Detta säkerställer att CSS tillämpas över hela webbplatsen utan att påverka andra element.

Slutligen, växla omkopplaren för att aktivera avsnittet och tryck på 'Spara ändringar'.

Och det är i princip allt!

Du kan nu besöka din webbplats för att se din smidiga rullning till toppen i aktion:

Bonustips: Andra subtila animationseffekter för att hålla besökare engagerade

En smidig knapp för att rulla till toppen är bara ett sätt att göra din webbplats mer användarvänlig. Det finns gott om andra små animationseffekter du kan lägga till för att försiktigt styra uppmärksamheten och göra surfandet på din webbplats enkelt.

Till exempel skapar en parallaxeffekt att bakgrundsbilder rör sig med en annan hastighet än ditt innehåll, vilket skapar en känsla av djup och rörelse. Moderna sidbyggare som SeedProd har denna funktionalitet inbyggd, vilket gör att du kan skapa denna effekt utan att skriva kod.

Det är ett enkelt sätt att få dina sidor att kännas mer levande. För steg-för-steg-instruktioner, se vår guide om hur man lägger till en parallaxeffekt.

En sök-växlings-effekt håller saker och ting rena genom att bara visa sökfältet när någon klickar på ikonen. Denna funktion döljer sökfältet tills en användare aktivt klickar på en knapp för att visa det. Detta hjälper din design att kännas mindre rörig, samtidigt som det gör det enkelt för besökare att hitta det de behöver.

Om ditt tema inte redan har detta inbyggt, kan plugins som WPCode hjälpa till. För detaljer, kolla in vår guide om hur man lägger till en sök-växlings-effekt i WordPress.

Och om du har ett bildgalleri, låter en lightboxeffekt folk se foton i ett större, distraktionfritt popup-fönster utan att lämna sidan. Denna överlagringseffekt visar bilder i ett fokuserat fönster samtidigt som resten av sidan tonas ner. Det är en liten detalj, men den gör stor skillnad för alla som älskar att utforska dina bilder.

Dessutom gör galleri-plugins som Envira Gallery det enkelt att lägga till den här funktionen. För att göra detta kan du hänvisa till vår guide om hur man lägger till ett galleri i WordPress med en lightboxeffekt.

Dessa detaljer är inte bara "trevliga att ha"; de visar besökarna att du har tänkt på deras upplevelse. Detta kan göra dem mer benägna att stanna kvar och utforska. 🕵️

Vanliga frågor: Lägga till en scroll-till-topp-effekt i WordPress med jQuery

Innan vi avslutar, här är några vanliga frågor som läsare har om att lägga till en knapp för att rulla till toppen i WordPress.

Är en scroll-till-toppen-knapp nödvändig för varje webbplats?

Inte alltid. Men det är ett smart tillägg för sidor med mycket innehåll. På långa blogginlägg eller handledningar sparar det besökare från besväret att behöva skrolla hela vägen upp igen, vilket gör deras surfupplevelse trevligare.

Kommer en knapp för att scrolla till toppen att sakta ner min webbplats?

Det borde det inte. Plugin-metoden är lättviktig och optimerad för prestanda, och jQuery-kodavsnittet är litet. Så det kommer inte att ha någon märkbar inverkan på din webbplats hastighet.

Var är den bästa platsen att placera knappen för att scrolla till toppen?

De flesta webbplatser placerar den i det nedre högra hörnet av skärmen. Denna plats håller den synlig och lättillgänglig utan att distrahera från huvud innehållet.

Kan jag använda en textlänk istället för en bild för min knapp?

Absolut. Både plugin- och anpassade kodmetoder kan ställas in med en enkel textlänk "Tillbaka till toppen" istället för en ikon. Pluginet erbjuder detta alternativ direkt, och med kodmetoden kan du bara justera HTML och CSS för att matcha din stil.

Vidare läsning: Fler resurser kring WordPress-teman

Vi hoppas att den här artikeln hjälpte dig att lägga till en smidig scroll-till-topp-effekt på din webbplats med jQuery. Att anpassa ditt tema med funktioner som denna är bara ett steg i att bygga en användarvänlig webbplats. Vill du dyka djupare in i WordPress-teman? Dessa resurser hjälper dig:

• Mest populära och bästa WordPress-teman
• Vad händer när du byter WordPress-tema?
• Saker du MÅSTE göra innan du byter WordPress-tema
• Vad är ett WordPress-temaramverk och vilka är de bästa temaramverken?
• Hur du anpassar ditt WordPress-tema
• Hur man hittar vilka filer man ska redigera i ett WordPress-tema
• Hur man använder WordPress Theme Customizer som ett proffs
• En komplett nybörjarguide till WordPress Full Site Editing

Om du gillade den här artikeln, prenumerera gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.