Hur man lägger till en jämn rulla högst upp-effekt i WordPress med hjälp av jQuery

Om du lägger till en effekt med smidig rullning högst upp kan du förbättra användarupplevelsen på din webbplats. Det är särskilt användbart när du har en lång sida, vilket hjälper besökare att snabbt återvända högst upp.

Inställningar för att rulla till toppen kan kännas skrämmande, så vi bestämde oss för att prova det själva. Och vi upptäckte att det är enkelt att ställa in på din WordPress webbplats genom att använda jQuery eller ett gratis tillägg.

I den här artikeln przewodnikar vi dig steg för steg hur du lägger till en smidig rulla upp-effekt i WordPress.

Vad är Smooth Scroll och när ska du använda det?

Om webbplatsen inte har en meny med klistrat inlägg måste användare som skrollar längst ner på ett långt inlägg eller en lång sida i WordPress manuellt svepa eller rulla sig tillbaka till toppen för att navigera på webbplatsen.

Det kan vara riktigt irriterande, och ofta trycker användarna helt enkelt på knappen tillbaka och lämnar sidan. Det är därför du behöver en knapp för att snabbt skicka användare till högst upp i inlägget eller sidan.

Vanligtvis kan du lägga till den här funktionen som en enkel textlänk utan att använda jQuery, som du gillar:

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

Det kommer att skicka användare högst upp genom att rulla upp hela sidan på millisekunder. Det fungerar, men effekten kan vara skakande, gillar när du kör på ett gupp i vägen.

En smidig rulla är motsatsen till det. Den skjuter tillbaka användaren högst upp med en visuellt tilltalande effekt. Att använda element som gillar detta kan drastiskt förbättra användarupplevelsen på din webbplats.

Med detta i åtanke kommer vi att dela två metoder för att lägga till en smidig rulla-till-topp-effekt på din WordPress webbplats med hjälp av ett tillägg och jQuery. Använd gärna snabblänkarna under för att hoppa till din föredragna metod:

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

Lägga till en jämn rulla till högst upp-effekt med ett tillägg för WordPress

Den här metoden rekommenderas för nybörjare eftersom den tillåter dig att lägga till en rulla högst upp-effekt på en WordPress webbplats utan att röra en enda rad kod.

Det första du behöver göra är att installera och aktivera tillägget WPFront Scroll Top. Om du behöver hjälp kan du vänligen läsa vår przewodnik om hur du installerar ett tillägg till WordPress.

När du är aktiverad kan du gå till Inställningar ” Rulla högst upp från din WordPress kokpit. Här kan du konfigurera tillägget och anpassa effekten av den mjuka rullningen.

Härifrån är det första du behöver göra att klicka på kryssrutan ”Aktiverad” för att aktivera knappen rulla till högst upp på din webbplats. Därefter kommer du att se alternativ för att redigera förskjutningen av rullningen, knappens storlek, opacitet, blekningstid, rullningstid och mer.

Om du rullar ner hittar du fler alternativ, till exempel att redigera tiden för automatisk döljning och aktivera alternativet att dölja knappen på små enheter eller wp-admin-vyn.

Du kan också redigera vad knappen gör när du klickar på den. Som standard rullar den till högst upp på sidan, men du kan ändra den så att den rullar till ett visst element i inlägget eller till och med länkar till en sida.

Dessutom kan du justera placeringen av knappen. Den visas vanligtvis längst ner till höger på vyn, men du har alternativet att flytta den till något annat hörn.

Tillägget WPFront Scroll Top erbjuder filter för att visa knappen för att rulla till toppen endast på valda sidor.

Normalt kommer den att visas på alla sidor i din WordPress blogg. Du kan dock navigera till sektionen ”Display on Sidor” och välja var du gillar att visa rulla högst upp-effekten.

Tillägget erbjuder också förbyggda knappar. Du bör enkelt kunna hitta en design som matchar din webbplats.

Om du inte hittar en förbyggd 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 bara på knappen ”Spara ändringar”.

Du kan nu besöka din webbplats för att se knappen rulla högst upp i działanie.

Lägga till Smooth Scroll to Top-effekt med jQuery i WordPress

Innan vi börjar, obs/observera att den här metoden ej rekommenderas för nybörjare. Den är lämplig för personer som är bekväma med att redigera teman eftersom det inkluderar att lägga till kod på din webbplats.

För att lägga till den mjuka effekten med att rulla högst upp använder vi jQuery, lite CSS och en enda rad HTML-kod i din WordPress tema.

Låt oss först öppna en textredigerare som Notepad och skapa en fil. Gå vidare och spara den som smoothscroll.js.

Därefter måste du copy and paste 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;
		});
});

Denna kod är jQuery-skriptet som kommer att add to en jämn rulla effekt till en knapp som tar användare till högst upp på sidan.

Därefter kan du spara filen och uppladda den till mappen /js/ i katalogen för ditt tema i WordPress.

Mer information finns i vår przewodnik om hur du använder FTP för att uppladare filer till WordPress.

Om ditt tema inte har en /js/ katalog kan du skapa en och uppladda smoothscroll.js till den.

Du kan också läsa mer i vår przewodnik om filerna och katalogerna i WordPress.

Nästa sak du behöver göra är att hämta filen smoothscroll.js i ditt tema.

För att göra det ska vi sätta skriptet i kö i WordPress genom att helt enkelt kopiera och klistra in den här koden i ditt temas functions.php-fil.

Vi rekommenderar dock inte att du redigerar filerna i temat direkt eftersom minsta misstag kan förstöra din webbplats. Istället kan du använda ett tillägg som WPCode och följa vår handledning om hur du lägger till anpassade fragment kodu i WordPress:

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

Ovanstående kod säger till WordPress att hämta vårt skript och jQuery-biblioteket eftersom vårt tillägg är beroende av dem.

Nu när vi har lagt till jQuery ska vi lägga till en länk på vår webbplats i WordPress som tar användarna tillbaka högst upp.

För att göra detta klistrar du helt enkelt in denna HTML-kod var som helst i ditt temas sidfot .php-fil med hjälp av WPCode. Om du behöver hjälp, vänligen se vår handledning om hur du lägger till kod för sidhuvud och sidfot i WordPress:

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

Du kanske har lagt märke till att HTML-koden innehåller en länk men ingen ankartext. Det beror på att vi kommer att använda en bildikon med en pil uppåt för att visa en knapp för säkerhetskopiera högst upp.

I det här exemplet använder vi en 40x40px-ikon. Lägg bara till den anpassade CSS:en under i ditt temas stilmall.

I den här koden använder vi en bildikon som bakgrundsbild för knappen och ställer in den på en poprawiono position. Vi har också lagt till en liten CSS-animering, som roterar knappen när en användare för musen ö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 ovan, se till att du ersätter https://www.example.com/wp-content/uploads/2013/07/top_icon.png med den bild URL som du vill använda.

Du kan ladda upp din egen bildikon med hjälp av mediauppladdaren i WordPress, kopiera bildens URL och sedan klistra in den i koden.

Och det är i princip allt!

Vi hoppas att den här artikeln hjälpte dig att lägga till en smidig rulla högst upp-effekt på din webbplats med hjälp av jQuery. Du kanske också vill se vår expertlista över saker du MÅSTE GÖRA innan du byter WordPress-tema och hur du hittar vilka filer du ska redigera i ett WordPress-tema.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.