Hur man lÀgger till en smidig rullning till toppeffekt i WordPress med jQuery

Hur man lÀgger till en smidig rullning till toppeffekt i WordPress med jQuery

Har du sett webbplatser som ger en smidig rullning till början av sidan? 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 oss om att lÀgga till en smidig rullning till toppeffekten i WordPress. I den hÀr artikeln visar vi dig hur du lÀgger till en smidig rullning till toppeffekten i WordPress med jQuery.

Obs! Denna handledning Àr skapad för en DIY-mellananvÀndare som Àr bekvÀm att redigera sina teman. Om du vill anvÀnda en pluginmetod, anvÀnd en smidig sidblÀddring till topp-plugin. För de som vill lÀra sig att göra detta utan ett plugin, fortsÀtt lÀsa.

Vad Àr Smooth Scroll och nÀr ska jag anvÀnda det?

NÀr en sida eller ett inlÀgg har mycket innehÄll tvingas anvÀndare att rulla ner för att lÀsa innehÄllet. NÀr anvÀndarna rullar ner gÄr alla dina navigationslÀnkar upp. NÀr anvÀndare Àr fÀrdiga med att lÀsa den artikeln mÄste de blÀddra uppÄt för att se vad du kan göra mer pÄ din webbplats. BlÀddra till toppen-knappen skickar snabbt anvÀndare till början av sidan. Du kan lÀgga till detta som en textlÀnk utan att anvÀnda jQuery, sÄ hÀr:


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

Det skickar bara anvÀndare till toppen av sidan och rullar upp hela sidan i millisekunder. Det Àr funktionellt, men som en bult pÄ vÀgen. Smidig rullning Àr motsatt av det. Det glider anvÀndaren smidigt tillbaka till början av sidan. Detta skapar en fin effekt och förbÀttrar anvÀndarupplevelsen.

LĂ€gga till smidig rullning till toppeffekt med jQuery i WordPress

För att lĂ€gga till en smidig rullning till toppeffekten anvĂ€nder vi 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 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;
		});
});

Spara filen och ladda upp den till din WordPress-temakatalog / js / mapp (se Hur man anvÀnder FTP för att ladda upp filer till WordPress). Om ditt tema inte har en / js / katalog skapar du en och laddar upp smoothscroll.js till den. Den hÀr koden Àr jQuery-skriptet som ger en smidig rullningseffekt till en knapp som tar anvÀndare till början 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 snyggt kommer vi att ange skriptet i WordPress (lÀs mer i vÄr guide om hur man korrekt lÀgger till skript i WordPress). Kopiera och klistra in den hÀr koden i temas funktioner.php-fil.


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

I ovanstÄende kod har vi sagt till 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-delen kan vi lÀgga till en verklig lÀnk till vÄr WordPress-webbplats som tar anvÀndare tillbaka till toppen. Klistra in denna HTML var som helst i ditt temas footer.php-fil.


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

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 bakÄt-upp-knapp. I det hÀr exemplet anvÀnder vi en 40x40px-ikon. LÀgg till detta i ditt temas stilark.


#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 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 WordPress-medieuppladdaren och sedan fÄ webbadressen att klistra in den som bakgrundswebbadress. Vi har ocksÄ lagt till en liten CSS-animering till knappen som roterar knappen nÀr en anvÀndare tar musen över den.

BlÀddra till toppeffekt lÄter anvÀndare 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 sidfot som vi har pÄ vÄr webbplats för att visa innehÄll. 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 det flytande plugin-programmet för sociala delar som vi har pÄ WPBeginner.

Vi hoppas att den hÀr artikeln hjÀlpte dig att lÀgga till en smidig rullning till sidans toppeffekt pÄ din webbplats med jQuery. För att se nÄgra andra hÀftiga anvÀndningsomrÄden för jQuery i WordPress kan du titta pÄ vÄr jQuery FAQ-dragspelartikel eller artikeln om lata laddningsbilder.

Tror du att blÀddra till toppeffekt Àr anvÀndbart? LÄt oss veta genom att lÀmna en kommentar nedan.