Ako prida┼ą plynul├ę pos├║vanie na ┼ípi─Źkov├Ż efekt v programe WordPress pomocou jQuery

Videli ste webov├ę str├ínky, ktor├ę prid├ívaj├║ plynul├ę pos├║vanie na za─Źiatok str├ínky? Je to skvel├ę, ak m├íte dlh├ę str├ínky a chcete svojim pou┼ż├şvate─żom poskytn├║┼ą jednoduch├Ż sp├┤sob, ako sa vr├íti┼ą sp├Ą┼ą na za─Źiatok. Ned├ívno sa n├ís jeden z na┼íich ─Źitate─żov p├Żtal na pridanie plynul├ęho pos├║vania k najvy┼í┼íiemu efektu v programe WordPress. V tomto ─Źl├ínku v├ím uk├í┼żeme, ako prida┼ą plynul├ę pos├║vanie, aby sa dosiahol maxim├ílny efekt v programe WordPress pomocou jQuery.

Pozn├ímka: Tento tutori├íl je vytvoren├Ż pre pokro─Źil├ęho pou┼ż├şvate─ża pre dom├ícich majstrov, ktor├Ż pohodlne upravuje svoje t├ęmy. Ak chcete pou┼żi┼ą met├│du doplnku, pou┼żite pos├║vanie m├Ąkkej str├ínky na za─Źiatok doplnku. Pre t├Żch, ktor├ş sa chc├║ nau─Źi┼ą, ako to urobi┼ą bez doplnku, ─Ź├ştajte ─Ćalej.

─îo je plynul├ę pos├║vanie a kedy ho pou┼ż├şva┼ą?

Ak m├í str├ínka alebo pr├şspevok ve─ża obsahu, pou┼ż├şvatelia s├║ n├║ten├ş prejs┼ą nadol a pre─Ź├şta┼ą si tento obsah. Ke─Ć sa pou┼ż├şvatelia pos├║vaj├║ nadol, v┼íetky naviga─Źn├ę odkazy id├║ nahor. Ke─Ć pou┼ż├şvatelia dokon─Źia ─Ź├ştanie tohto ─Źl├ínku, mali by prejs┼ą nahor a zisti┼ą, ─Źo e┼íte maj├║ robi┼ą na svojich webov├Żch str├ínkach. Posunut├şm na horn├ę tla─Źidlo sa r├Żchlo odo┼íl├║ pou┼ż├şvatelia do hornej ─Źasti str├ínky. M├┤┼żete to prida┼ą ako textov├Ż odkaz bez pou┼żitia jQuery, napr├şklad:

^Top
 

Jednoducho odo┼íle pou┼ż├şvate─żov na za─Źiatok str├ínky a pos├║va cel├║ str├ínku v milisekund├ích. Je funk─Źn├Ż, ale je to ako z├ísah do cesty. Hladk├ę pos├║vanie je opakom. Opatrne potiahnite pou┼ż├şvate─ża do hornej ─Źasti str├ínky. To vytv├íra pekn├Ż efekt a zlep┼íuje dojem pou┼ż├şvate─ża.

Pridajte do syst├ęmu WordPress plynul├ę pos├║vanie, aby ste dosiahli maxim├ílny efekt

Na dosiahnutie hladk├ęho pos├║vania k najvy┼í┼íiemu efektu pou┼żijeme vo va┼íej t├ęme WordPress jQuery, niektor├ę CSS a jedin├Ż riadok HTML k├│du. Najprv otvorte textov├Ż editor, napr├şklad Pozn├ímkov├Ż blok. Vytvorte s├║bor a ulo┼żte ho ako smoothscroll.js. Skop├şrujte a prilepte tento k├│d do s├║boru:

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

Vo vy┼í┼íie uvedenom k├│de sme povedali WordPress, aby na─Ź├ştal n├í┼í skript a tie┼ż na─Ź├ştal kni┼żnicu jQuery, preto┼że na tom n├í┼í doplnok z├ívis├ş. Teraz, ke─Ć sme pridali ─Źas┼ą jQuery, pridajme skuto─Źn├Ż odkaz na na┼íu str├ínku WordPress, ktor├í pou┼ż├şvate─żov privedie sp├Ą┼ą na vrchol. Vlo┼żte tento k├│d HTML kamko─żvek do s├║boru footer.php v├í┼ího mot├şvu.

 

Ako ste uviedli, pridali sme odkaz, ale neprepojili sme ho so ┼żiadnym textom. Je to preto, ┼że na zobrazenie tla─Źidla sp├Ą┼ą na za─Źiatok pou┼żijeme ikonu obr├ízka so ┼í├şpkou nahor. V tomto pr├şklade pou┼ż├şvame ikonu 40x40px. Pridajte toto do ┼íabl├│ny ┼ít├Żlov va┼íej t├ęmy.

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

Vo vy┼í┼íie uvedenom CSS sme pre na┼íu ikonu obr├ízka pou┼żili pevn├║ poz├şciu a ako obr├ízok na pozad├ş sme pou┼żili ikonu obr├ízka. Ikonu obr├ízka m├┤┼żete nahra┼ą pomocou zariadenia na nahr├ívanie m├ędi├ş WordPress a potom m├┤┼żete z├şska┼ą adresu URL obr├ízka, ktor├í sa vlo┼ż├ş ako adresa URL na pozad├ş. Do tla─Źidla sme pridali aj mal├║ anim├íciu CSS, ktor├í tla─Źidlo oto─Ź├ş, ke─Ć na┼ł pou┼ż├şvate─ż prejde.

Pos├║vanie po najlep┼í├ş efekt umo┼ż┼łuje pou┼ż├şvate─żom vr├íti┼ą sa na za─Źiatok a n├íjs┼ą na va┼íom webe ─Ćal┼íie veci. ─Äal┼íou vecou, ÔÇőÔÇőktor├║ m├┤┼żete urobi┼ą, je prida┼ą pl├ívaj├║ce p├Ąty, ako je t├í, ktor├║ m├íme na na┼íich str├ínkach, aby sa zobrazoval odpor├║─Źan├Ż obsah. Ak nechcete, aby va┼íi pou┼ż├şvatelia pos├║vali nahor a zdie─żali v├í┼í ─Źl├ínok, d├┤razne v├ím odpor├║─Źame, aby ste pou┼ż├şvali pl├ívaj├║ci doplnok pre li┼ítu soci├ílneho zdie─żania, ako sme to urobili vo WPBeginner.

D├║fame, ┼że tento ─Źl├ínok v├ím pomohol prida┼ą plynul├ę pos├║vanie na za─Źiatok str├ínky pomocou webu jQuery. ─Äal┼íie skvel├ę pou┼żitia jQuery vo WordPress si m├┤┼żete pre─Ź├şta┼ą v na┼íom FAQ FAQ o akorde├│noch jQuery alebo v ─Źl├ínku o lenivom na─Ź├ştan├ş obr├ízkov

Mysl├şte si, ┼że je potrebn├ę prejs┼ą na najvy┼í┼í├ş efekt? Dajte n├ím vedie┼ą zanechan├şm koment├íra ni┼ż┼íie.