Hur man lägger till Smooth Scroll to Top Effect i WordPress med hjälp av jQuery

Har du sett webbplatser som lägger till smidig rullning högst upp på sidan? Detta är bra när du har en lång sida och vill ge dina användare ett enkelt sätt att komma tillbaka till början. Nyligen frågade en av våra läsare oss om att lägga till smidig rullning till toppeffekt i WordPress. I den här artikeln kommer vi att visa dig hur du lägger till smidig rullning för bästa prestanda i WordPress med hjälp av jQuery.

Obs: Denna handledning är gjord för att mellanliggande gör-det-själv-användare ska känna sig fri att redigera sitt tema. Om du vill använda plugin-metoden använd soft page scroll till topp plugin. För den som vill lära sig hur man gör detta utan plugin, läs då vidare.

Vad är smidig rullning och när ska det användas?

När en sida eller ett inlägg har mycket innehåll, tvingas användaren att scrolla ner för att läsa den. När användaren rullar nedåt ökar alla deras navigeringslänkar. När användare har läst klart den artikeln bör de rulla uppåt för att se vad mer de kan göra på deras webbplats. Att rulla till den översta knappen tar användaren snabbt till toppen av sidan. Du kan lägga till detta som en textlänk utan att använda jQuery, så här:

^Top

Det skickar helt enkelt användaren till toppen av sidan och rullar hela sidan på millisekunder. Den är funktionell, men den är som en hit på vägen. Jämn rullning är motsatsen till det. Svep försiktigt användaren till toppen av sidan. Detta skapar en fin effekt och förbättrar användarupplevelsen.

Lägg till smidig rullning till toppeffekt med jQuery i WordPress

För att lägga till smidig rullning till toppeffekten kommer vi att använda jQuery, lite CSS och en enda rad HTML-kod i ditt WordPress-tema. Öppna först en textredigerare som Anteckningar. Skapa en fil och spara den som smoothscroll.js. Kopiera och klistra in denna kod i filen:

jQuery(document).ready(function($){
	$(window).scroll(function(){
        if ($(this).scrollTop() 
Guarde el archivo y cárguelo en la carpeta / js / de su directorio de temas de WordPress (consulte Cómo usar FTP para cargar archivos en WordPress). Si su tema no tiene un directorio / js /, cree uno y cargue smoothscroll.js en él. Este código es el script jQuery que agregará un efecto de desplazamiento suave a un botón que lleva a los usuarios a la parte superior de la página. 






	



	



	



	



Lo siguiente que debe hacer es agregar smoothscroll.js a su tema. Para hacerlo bien, colocaremos el script en WordPress (obtenga más información en nuestra guía sobre cómo agregar correctamente los scripts en WordPress). Copie y pegue este código en el archivo functions.php de su tema. 
wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '',  true );

I koden ovan sa vi åt WordPress att ladda vårt skript och även ladda jQuery-biblioteket eftersom vårt plugin beror på det.  Nu när vi har lagt till jQuery-sektionen, låt oss lägga till en faktisk länk till vår WordPress-webbplats som tar användaren tillbaka till toppen av sidan.  Klistra in denna HTML var som helst i ditt temas footer.php-fil.
Như bạn đã lưu ý, chúng tôi đã thêm một liên kết nhưng chúng tôi chưa liên kết nó với bất kỳ văn bản nào. Điều này là do chúng ta sẽ sử dụng biểu tượng hình ảnh có mũi tên hướng lên để hiển thị nút quay lại đầu trang. Trong ví dụ này, chúng tôi đang sử dụng biểu tượng 40x40px. Thêm phần này vào bảng kiểu của chủ đề của bạn.
#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 använde vi en fast position för vår bildikon och vi använde bildikonen som bakgrundsbild.  Du kan ladda upp din bildikon med hjälp av WordPress media uploader och sedan få bilden URL att klistra in som bakgrunds URL.  Vi har också lagt till en liten CSS-animation till knappen för att rotera knappen när användaren håller muspekaren över den.
Genom att rulla till toppen kan användare gå tillbaka till början och hitta andra saker att göra på din webbplats.  En annan sak du kan göra är att lägga till en flytande sidfotsfält som den vi har på vår sida för att visa utvalt innehåll.  Om du inte vill att dina användare ska scrolla upp för att dela dina artiklar rekommenderar vi att du använder ett flytande plugin för den sociala delningsfältet som vi gjorde i WPBeginner.
Vi hoppas att den här artikeln hjälpte dig att lägga till smidig rullning längst upp på sidan effekter på din webbplats med hjälp av jQuery.  För andra fantastiska användningar av jQuery i WordPress kan du kolla in vår jQuery dragspel FAQ-artikel eller lazy loading






	



	



	



	



Tror du att det är användbart att scrolla till toppeffekten?  Låt oss veta genom att lämna en kommentar nedan.