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 scrollning är en navigerings effekt som flyttar sidan upp eller ner i en jämn, flytande rörelse istället för att hoppa direkt till en sektion. Du bör använda den när du vill ge användarna ett mindre störande sätt att navigera långa sidor, särskilt för funktioner som "tillbaka till toppen"-knappar.
Om inte webbplatsen har en klibbig sidhuvudmeny, användare som scrollar till slutet av ett långt WordPress-inlägg eller en sida måste manuellt svepa eller scrolla sig tillbaka till toppen för att navigera på webbplatsen.
Det kan vara en riktig irritation, och ofta kommer användare helt enkelt att trycka på tillbaka-knappen och lämna. Därför behöver du 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 jämn scrollning är motsatsen till det. Den kommer att glida tillbaka användaren 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:
- Tips 1: Lägga till en smidig scroll-till-toppen-effekt med ett WordPress-plugin (enkelt)
- Tips 2: Lägga till en smidig rullning till toppen-effekt med jQuery i WordPress (Avancerat)
- Bonustips: Andra subtila animationseffekter för att hålla besökare engagerade
- Vanliga frågor: Lägga till en rullningseffekt till toppen i WordPress med jQuery
- Vidare läsning: Fler resurser kring WordPress-teman
Utan vidare dröjsmål, låt oss börja med den första metoden.
Lägga till en jämn rullningseffekt till toppen 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 pluginet WPFront Scroll Top. 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 visas den 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 knappen för scrollning till toppen i aktion.
Lägga till en jämn rullningseffekt till toppen med jQuery i WordPress
Innan vi börjar, notera att denna metod inte rekommenderas för nybörjare. Den är lämplig för personer som är bekväma med att redigera teman eftersom den inkluderar att lägga till kod på din webbplats.
För att lägga till effekten av jämn scrollning till toppen kommer vi att använda jQuery, lite CSS och en enda rad HTML-kod i ditt WordPress-tema.
Först, låt oss öppna en textredigerare som Anteckningar och skapa en fil. Spara den som smoothscroll.js.
Därefter måste du kopiera och klistra in den här koden i filen:
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;
});
});
Den här koden är jQuery-skriptet som kommer att lägga till en jämn scrollningseffekt till en knapp som tar användare till toppen av sidan.
Därefter kan du spara filen och ladda upp den till mappen /js/ i din WordPress-temakatalog.
För mer information, se vår guide om hur man använder FTP för att ladda upp filer till WordPress.
💡 Notera: Osäker på vilken FTP-klient du ska använda? Vårt webbutvecklingsteam på WPBeginner använder ofta FileZilla. Det är ett pålitligt, gratis alternativ för att hantera dina webbplatsfiler.
Om ditt tema inte har en /js/-katalog, kan du skapa en och ladda upp smoothscroll.js till den.
Du kan också se vår guide om WordPress fil- och katalogstruktur för mer information.
Nästa sak du behöver göra är att ladda filen smoothscroll.js i ditt tema.
För att göra det kommer vi att köa skriptet i WordPress genom att helt enkelt kopiera och klistra in denna kod i din themes functions.php-fil.
Vi rekommenderar dock inte att du redigerar temafiler direkt, eftersom minsta misstag kan förstöra din webbplats.
Istället kan du använda ett plugin som WPCode, det bästa pluginet för kodavsnitt för WordPress, och följa vår handledning om att lägga till anpassade kodavsnitt i WordPress:
wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '', true );
💡 Notera: Vi använder WPCode på våra företagswebbplatser för att skapa och hantera anpassade kodavsnitt.
För den här handledningen behöver du bara gratisversionen av WPCode. Om du däremot vill ha avancerade funktioner som kodschemaläggning eller en komplett revisionshistorik, behöver du WPCode Pro. Du kan läsa mer om det i vår fullständiga WPCode-recension.
Koden ovan talar om för WordPress att ladda vårt skript och jQuery-biblioteket eftersom vårt plugin är beroende av dem.
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, klistra helt enkelt in denna HTML var som helst i din temas footer.php-fil med WPCode.
<a href="#top" id="smoothup" title="Back to top"></a>
Om du behöver hjälp, se vår handledning om hur man lägger till kod i sidhuvud och sidfot i WordPress
Du kanske har märkt att HTML-koden innehåller en länk men ingen ankaretext. Det beror på att vi kommer att använda en bildikon med en uppåtpil för att visa en knapp för att gå tillbaka till toppen.
I det här exemplet använder vi en ikon på 40x40px. Lägg helt enkelt till den anpassade CSS:en nedan till ditt temas stylesheet.
I den här koden använder vi en bildikon som knappens bakgrundsbild och placerar den på en fast position. Vi har också lagt till en liten CSS-animation som roterar knappen när en användare för muspekaren över den:
#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
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) }
background: url('') no-repeat;
}
I CSS:en ovan, se till att du ersätter https://www.example.com/wp-content/uploads/2013/07/top_icon.png med URL:en till den bild du vill använda.
Du kan ladda upp din egen bildikon med hjälp av WordPress mediauppladdare, kopiera bildens URL och sedan klistra in den i koden.
Och det är i princip allt!
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 gör en parallaxeffekt att bakgrundsbilder rör sig i en annan hastighet än ditt innehåll, vilket skapar en känsla av djup och rörelse.
Det är ett enkelt sätt att få dina sidor att känna sig mer levande. För steg-för-steg-instruktioner, se vår guide om hur man lägger till en parallaxeffekt.
En sökknappseffekt håller saker och ting rena genom att visa sökfältet endast när någon klickar på ikonen. Detta hjälper din design att kännas mindre rörig samtidigt som det är lätt 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ökningstoggle-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. Det är en liten detalj, men den gör stor skillnad för alla som älskar att utforska dina bilder.
Dessutom gör galleriprogram 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 lightbox-effekt.
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 guider sparar det besökare från besväret att behöva skrolla hela vägen upp igen, vilket gör deras surfupplevelse mer njutbar.
Kommer en knapp för att scrolla till toppen att sakta ner min webbplats?
Det borde det inte. Pluginmetoden ä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 justerar du bara 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 jämn rullningseffekt till toppen på din webbplats med jQuery. Vill du dyka djupare in i WordPress-teman? Dessa resurser kommer att hjälpa 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 då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Olaf
Den här lilla ikonen är utmärkt för skrivbordslösningar, där användare måste skrolla mycket för att komma tillbaka till toppen. Det är en fin detalj, och jag gillar den personligen. På mobila enheter går syftet något förlorat, eftersom snabb svepning är tillgänglig, och ibland är knappen bara i vägen. Pluginet som nämns i artikeln är ett av få i WordPress-arkivet som fungerar verkligen överallt och som det ska. Jag rekommenderar det och använder det ibland själv. Baserat på min erfarenhet föreslår jag dock att inaktivera det specifikt på mobila enheter.
Dennis Muthomi
Ett tips jag skulle ÄLSKA att lägga till är att överväga att matcha knappens färgschema med din webbplats tema för ett mer sammanhängande utseende.
Denna lilla detalj kan göra stor skillnad i den övergripande användarupplevelsen.
Mrteesurez
Jag ser att implementeringen av en funktion för att rulla till toppen är fördelaktig för webbplatser, särskilt webbplatser som publicerar mycket långt innehåll. Användare kan behöva se början av inlägget eller komma tillbaka till toppen, så denna funktionalitet kommer verkligen att förbättra användarupplevelsen. Jag ser att de flesta webbplatser, inklusive WPbeginner, inte använder den, men varför?
Finns det någon fördel med att inte använda den, kanske för mer användarbindning eller vad?
Du kan inkludera för- och nackdelar med den i detta inlägg i en senare uppdatering.
WPBeginner Support
We will look into the possibility for the future, for now we do not have it as personal preference. As someone goes through a tutorial they normally want to see the previous step by scrolling manually and not the start of the article
Admin
Mrteesurez
Tja, möjligtvis, men för mig är användningsfallet mer än att bara se föregående steg i artiklar. Den här artikeln belyste att ”Om webbplatsen inte har en fast meny högst upp, 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 trycka på tillbaka-knappen och lämna. Därför behöver du en knapp för att snabbt skicka användare till toppen.” Jag vill bara påpeka att de användningsfall som nämns i artikeln är fördelaktiga och motiverar användningen. Tack.
Jiří Vaněk
Tidigare hade jag ingen 'tillbaka till toppen'-knapp på sidan, men eftersom mina artiklar blev längre och längre ville jag inte att användarna skulle spendera flera sekunder på att scrolla. Jag började använda exakt detta plugin, och det är fantastiskt. Det förbättrar användarkomforten avsevärt, även om det vid första anblicken kan verka onödigt. Det är det inte.
Asha
Tack så mycket! Detta är mycket tydligt förklarat. Hjälpsamt.
Marco
Jquery-metoden fungerade inte för mig med ett Twenty-seventeen child theme. Nåväl. Hyperlänkversionen fungerade perfekt, tack och lov, och det räcker för mig.
Marco
En fråga... kan en anledning till att detta inte fungerar för mig (jQuery-metoden) vara att min WordPress-installation ligger i en undermapp? Det är den enda anledningen jag kan komma på.
Taffeltrast
Skulle älska detta, men det förstör footer.php. Footern laddas helt enkelt inte.
När jag försöker lägga till det i footer.php får jag “Det finns ett syntaxfel på rad 14. etc etc”, och när jag försöker ladda upp det ändå, laddas inte footern.
oliver
tack så mycket, enkelt och effektivt.
mina två ören, om du redan har en custom.js-fil i ditt tema kan du helt enkelt lägga till jquery-funktionen i den här filen istället för att skapa en ny fil och lägga till den igen.
Personligen föredrar jag att ha alla mina små skript i en fil.
Stuart
Barn tema designat av Blank |
<?php }
add_action('wp_head', 'my_favicon');
Vad gör jag fel? Det här är min functions.php. Ny på wp_enqueue_scripts.
Stuart
Twenty Fifteen-Child Theme skapade en Js-mapp och lade till alla wp_enqueue_script men inget hände, är inte säker på vad som gick fel. Jag vill använda så få plugins som möjligt, de verkar sakta ner WordPress-sajter. Lade till en favicon, perfekt, wp_enqueue_script är lite nytt för mig. Någon hjälp?
Donald
Hej, fungerar detta fortfarande? Ikonen visas (om jag tillfälligt ändrar CSS till display:block), skriptet visas som laddat i Firefox utvecklarverktygs konsol. Jag får dock följande felmeddelande för rad 1:
‘SyntaxError: saknar ; före uttryck’
Jag har kopierat skriptet som ovan:
01 jQuery(document).ready(function($){ 02 $(window).scroll(function(){ 03 if ($(this).scrollTop() < 200) { 04 $('#smoothup') .fadeOut(); 05 } else { 06 $('#smoothup') .fadeIn(); 07 } 08 }); 09 $('#smoothup').on('click', function(){ 10 $('html, body').animate({scrollTop:0}, 'fast'); 11 return false; 12 }); 13 });
Kan någon se vad problemet kan vara?
Donald
Josh Patterson
Finns det något sätt att få den att tona ut innan den når botten av sidan?
jaybob
Hej, det fungerar bra. Tack för handledningen men jag har bara ett problem, bilden dyker upp för snabbt. Kan jag göra något för att den ska dyka upp senare / lite längre ner, efter att ha scrollat?
Aaron
Detta är ett mycket rent sätt att lösa detta. Helt klart min favorit jag har hittat.
Snabb fråga... Jag har lagt den i min footer.php-fil... Hur kan jag få den att sluta sitta fast på en viss punkt? Till exempel, jag har en sidfot som är 575px hög och jag vill inte att ikonen ska gå in i det området. I princip sluta den fasta positionen vid säg, 600px från botten av sidan.
Ulv
Skulle denna lösning lägga till filen smoothscroll.js till portionen av html-filen eller...?
emanuele
Hej, är det möjligt att lägga till smidig scroll i menyn för att scrolla sidan?... jag har skapat en mall för en sida och jag vill att den ska scrolla via menyn... tack
StefsterNYC
Om jag förstår dig rätt vill du lägga till det i huvudmenyns navigering? Korrekt? Använd helt enkelt samma selektornamn men ändra CSS helt. Så att bilden inte visas.
Förstår du?
Paul
Tack så mycket för det här tipset! Jag har dock ett problem. När jag minskar skärmstorleken försvinner min pil medan jag vill ha den på en specifik plats.
Finns det ett sätt att fixa det?
Tack
Paul
Paul
Jag hittade en lösning på mitt problem. Jag behövde bara ändra min CSS till:
#smoothup {
top: 572px;
left: auto;
margin-left: -68px;
}
Mushir
Tack mannen! fungerar som magi.. du gjorde verkligen min dag!
Steven Wolock
Tack för detta! Det fungerar utmärkt.
Fråga: Är den där slutklämman korrekt efter -webkit-transform: rotate(360deg)?
etech0
Jag satte upp detta på min sida, men jag ser inte ikonen! Hur kan jag ta reda på varför den inte fungerar?
Tack!
WPBeginner Support
Det kan finnas alla möjliga anledningar. Kontrollera först att du har laddat upp bilden, kontrollera sedan att bakgrunden: url har rätt URL och att den leder till din bild. Kontrollera slutligen att jquery och din .js-fil laddas. Försök slutligen att justera CSS-värden för display, position och text-indent.
Admin
etech0
Jag löste det – jag var tvungen att ändra höjden och bredden på 40px för att matcha min bild.
Tack för en utmärkt handledning!
Alexander Gruzov
Tack!