Butoni "lart" për sitin: si të bëni

Përmbajtje:

Butoni "lart" për sitin: si të bëni
Butoni "lart" për sitin: si të bëni
Anonim

Një funksion i tillë si butoni "lart" për sitin e bën burimin e internetit më të përshtatshëm për vizitorët e tij. Kjo ju ndihmon të lëvizni me lehtësi nga kudo në faqe në krye të faqes. Kjo është një domosdoshmëri për dyqanet online dhe faqet me artikuj të mëdhenj që kërkojnë lëvizje të gjatë poshtë.

Çfarë është për

Për momentin, shumica e faqeve nuk kanë një funksion të tillë si butoni "lart", dhe nuk ka asgjë kritike në këtë. Por përdorimi i tij mund të sjellë shumë përparësi si për burimin e internetit ashtu edhe për vizitorët e tij.

Përfitim për vizitorët

Ndodh shpesh kur faqja e një burimi të internetit është e ngarkuar shumë me informacion, kur një artikull informues zë shumë hapësirë dhe ju duhet të lëvizni poshtë faqes me timonin e miut. Përveç kësaj, në fund të artikullit mund të ketë shumë komente për të.

Kur një vizitor lexon një artikull, nuk ka asgjë të lodhshme për të lëvizur poshtë faqes, por kur teksti ka përfunduar dhe ju duhet të ngjiteni lart, ai fillon të bëhet pak i lodhshëm. Shumica e njerëzve thjesht do të jenë shumë dembel për të lëvizur për një kohë të gjatë dhe thjesht do ta mbyllin faqen, në vend që të bëjnë një shëtitje tjetër nëpër hapësirat e saj.

Përdorimi i butonitlëvizja e menjëhershme në krye të faqes e bën më të përshtatshëm kalimin e kohës në sajt.

Përfitim për burimin e internetit

butonin lart për faqen e internetit
butonin lart për faqen e internetit

Pezitë për vetë burimin vijnë nga faktorët e kaluar, pasi navigimi më i lehtë i faqes përmirëson faktorët e sjelljes pasi të gjithë vizitorët do të jenë më aktivë në veprimet e tyre dhe do të kalojnë në faqe të tjera.

Kështu, këta faktorë të sjelljes ndikojnë në qëndrimin e të gjithë motorëve të kërkimit ndaj sajtit dhe çojnë në një përmirësim të pozicionit në rezultatet e kërkimit.

Si ta bëni vetë butonin "up" në sajt

butonin lart për uebsajtin html
butonin lart për uebsajtin html

Të merremi më tej. Ju gjithmonë mund të bëni vetë një buton lëvizës lart për një sajt në cilindo nga CMS-të duke ndjekur vetëm disa hapa jashtëzakonisht të thjeshtë:

  • krijimi i imazhit;
  • krijimi i një skripti;
  • krijo stilin e butonit;
  • duke shtuar në sajt.

Imazhi i butonit

Për të shtuar një buton "lart" në sajt, fillimisht duhet të bëni vetë ikonën, kur të klikohet, përdoruesi do të lëvizë në krye të faqes. Për ta bërë këtë, mund të përdorni opsione të gatshme, ndër të cilat gjithmonë mund të zgjidhni atë më të përshtatshmen.

Për të përmirësuar pamjen e butonit, duhet të bëjmë disa përmirësime, domethënë të bëjmë një sprite që na lejon të kombinojmë imazhet e sfondit bazuar në CSS, duke krijuar kështu një animacion prej tyre.

Për vepra grafike, mund të përdorni çdo redaktues. Por opsioni më i përshtatshëm do të ishte një shërbim në internet. PIXLR, pasi nuk ka asgjë për të shkarkuar këtu dhe mund ta përdorni direkt në shfletuesin tuaj.

Për të filluar, në dritaren e redaktuesit që shfaqet, zgjidhni fushën "Ngarko imazh nga kompjuteri". Le të marrim si shembull imazhin e një rakete.

si të make up butonin në faqen e internetit
si të make up butonin në faqen e internetit

Nëse dimensionet e ikonës së përzgjedhur janë shumë të mëdha, atëherë do t'ju duhet të bëni një rregullim të madhësisë së vogël. Për ta bërë këtë, shkoni në menunë e sipërme dhe zgjidhni fushën "Redakto" dhe pas "Transformimit falas …"

Më pas, pranë figurës shfaqen shënues të veçantë, duke lëvizur të cilët mund të ndryshoni madhësinë e figurës. Për të ruajtur përmasat, mund të përdorni tastin Shift, duke mbajtur të cilin ju duhet të lëvizni shënuesit blu. Në fund të këtyre hapave, merret një imazh i një rakete.

Hapi tjetër është krijimi i një kopjeje të shtresës.

Tani ju duhet ta zhvendosni pak lart figurën e raketës nga shtresa e re. Për ta bërë këtë, do të jetë e përshtatshme të përdorni mjetin lëvizës, i cili ndodhet në kolonën e dytë të menysë së majtë dhe shigjetën lart në tastierë.

Tani duhet ta bëjmë foton e sipërme bardh e zi. Kjo mund të bëhet duke përdorur artikullin "Korrigjim" - "Hue / Saturation" në menunë e sipërme. Për zhngopje të plotë, rrëshqitësi Saturation duhet të vendoset në -100. Ky veprim do t'ju lejojë të krijoni një efekt në të cilin butoni "Up" do të kthehet nga bardh e zi në ngjyrë kur qëndroni mbi të.

Prekja e fundit është heqja e hapësirës shtesë rreth dy fotografive. Për ta bërë këtë, zgjidhni artikullin "Crop" nga menyja e majtë dhene zgjedhim vetëm dy raketa në një drejtkëndësh. Për të kryer prerjen, shtypet tasti Enter.

Rezultati është një imazh në të cilin nuk ka hapësirë shtesë të lirë. Do t'ju duhet të shkruani gjerësinë dhe lartësinë e imazhit që rezulton, pasi këto të dhëna do të jenë të dobishme në hapin tjetër.

si të make up butonin në faqen e internetit
si të make up butonin në faqen e internetit

Për të ruajtur, duhet të klikoni në "File" - "Save", ku në paragrafin e majtë "My Computer" shkruajmë emrin e figurës (vetëm paraqitjen në anglisht), zgjidhni formatin (në këtë rasti, PNG) dhe klikoni butonin "Po".

Skedar me skriptin e butonit "lart"

Nuk keni nevojë të shkruani një skenar në këtë rast. Do të jetë e mundur të përdoret versioni publik, duke bërë disa ndryshime në kodin e përfunduar.

Për ta bërë këtë, duhet të shkarkoni çdo redaktues kodi. Opsioni më i popullarizuar dhe gjithashtu falas është Notepad++. Pasi ta instaloni, duhet të kopjoni dhe ngjisni të gjithë këtë kod në të:

$(dokument).ready(funksion(){ $(dritare).scroll(funksion () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} tjetër {$('scroller').fadeOut();}});$('scroller').kliko(funksioni () {$('trupi, html').animate({scrollTop: 0}, 400); kthe false;}); });

Tjetra, klikoni në menunë e sipërme "File" - "Ruaj si …", pas së cilës ruajmë kodin në formatin.js. Pas kësaj, mund ta përdorni këtë kod në faqen tuaj duke ngarkuar skedarët e skriptit dhe imazhet në të duke përdorur një lidhje FTP.

Instalo në sajtin

Për të vendosur butonin e lëvizjes lart për sajtin, duhet të vendosnikodi i kërkuar i vendit. Duhet ta futni përpara etiketës.

Krijimi i një stili butoni me CSS

Më shpesh, butoni "lart" për sajtin gjendet në fund ("footer").

Kodi i mëposhtëm duhet të shtohet në skedarin style.css të sajtit:

/Butoni lart/

.scrollTop{

background:url('images/up.png') 0 0 pa përsëritje;/shtegu origjinal i imazhit/

width:39px;/ butoni gjerësia/

lartësia:96px;/50% lartësia e butonit/

bottom:5px;/mbushja e poshtme në pozicionin fiks/

majtas:89%;/zhvendosja majtas/

}.scrollTop:hover{background-position:0 -108px; } /zhvendosja e sfondit/"

Në këtë rast, ato të dhëna për gjerësinë dhe lartësinë e imazhit do të nevojiten. Mbetet vetëm për të futur të dhënat e marra në kod, dhe butoni "lart" për sitin do të jetë gati! Çfarë tjetër?

Butoni Up për sajtin Wordpress

si të make up butonin në faqen e internetit
si të make up butonin në faqen e internetit

Për këtë CMS, butoni "Up" mund të bëhet duke përdorur shtojca, si dhe në mënyrë të pavarur.

Metoda e shtojcave është më e përshtatshme dhe e lehtë për t'u instaluar, pasi kërkon vetëm të klikoni në butonin e instalimit dhe të konfiguroni të gjithë funksionalitetin në menynë e shtojcave.

Zgjedhja e kësaj të fundit duhet të trajtohet me kujdes, pasi me të do të jetë e lehtë për të marrë një virus në sit. Opsioni më i popullarizuar dhe i provuar është një shtojcë e quajtur Scroll Back To Top. Mund ta shkarkoni duke përdorur kërkimin standard për shtojcat e Wordpress.

Kjo shtesë kafunksionalitet të shumëfishtë dhe do të jetë shumë e lehtë të personalizoni butonin "lart" për një sajt Wordpress. Nuk është e nevojshme të ndryshoni fare të gjitha vlerat, ju vetëm duhet të konfiguroni pamjen dhe vendndodhjen e butonit në faqen e faqes.

Siç mund ta shihni, konfigurimi i butonit up me shtojca është shumë i lehtë. Por ka një nuancë të rëndësishme, e cila është se çdo shtojcë e instaluar ngarkon CMS. Kjo mund të ndikojë në shpejtësinë e burimit të internetit. Kjo është arsyeja pse shumica e pronarëve të faqeve përpiqen të bëjnë të gjitha ndryshimet drejtpërdrejt në kod, dhe jo me ndihmën e shtesave të palëve të treta. Ju mund të bëni një buton "up" për një sajt HTML, i cili do të minimizojë burimet e konsumuara.

Para se të ndryshoni të gjithë skedarët e sistemit Wordpress, duhet t'i kopjoni ato. Më pas mund të ndiqni të gjithë hapat për të krijuar butonin tuaj, të përshkruar më sipër.

Buton "lart" për Joomla

butoni lart për uebsajtin joomla 3
butoni lart për uebsajtin joomla 3

CMS Joomla gjithashtu mbështet instalimin e shtojcave, si Wordpress. Versioni më i suksesshëm i butonit "up" për një sajt në Joomla 3 është një shtesë e quajtur Top of the Page.

Në këtë CMS, çdo shtojcë mund të instalohet përmes "Extension Manager". Për këtë ju duhet:

  • shkarkoni shtesën në internet;
  • kliko në butonin "Shfleto" në menaxherin e shtesave;
  • zgjidh arkivin e shkarkuar;
  • kliko "Shkarko" dhe instalo.

Tani duhet ta aktivizoni në "Menaxherin e Shtojcave". Për këtëju duhet të shkoni te ky seksion, të gjeni shtojcën dhe të kaloni statusin e tij në "enabled".

Hapi tjetër është të konfiguroni të gjithë parametrat e zgjerimit duke përdorur të njëjtin seksion ku duhet të gjeni "Parametrat bazë" të kësaj shtojce në anën e djathtë.

Sai i faqes ka funksionalitetin e mëposhtëm:

  • Run in/ administrator - duke aktivizuar opsionin jo vetëm në burimin e internetit, por edhe në vetë panelin CMS të Joomla.
  • Pozicioni i zbulimit të butonit - sa pikselë duhet të kthejë përdoruesi në mënyrë që të shfaqet butoni lart.
  • Omit Button Tekst - prania e tekstit në buton.
  • Gjithmonë në krye - faqja e faqes do të shfaqet gjithmonë nga lart. Kur përdorni ankorat për të lëvizur në një vendndodhje specifike në faqe, ky opsion nuk duhet të aktivizohet.
  • Lëvizja e qetë - e bën lëvizjen e faqes më të qetë.
  • Kohëzgjatja e lëvizjes - koha pas së cilës faqja do të kalojë plotësisht në fillim.
  • Tranzicioni i lëvizjes - Shton më shumë efekte vizuale në lëvizje.
  • Lehtësim i tranzicionit - "dobësim" i lëvizjes në krye të faqes.
  • Vendndodhja e lidhjes - vendndodhja e ikonës. Si parazgjedhje, butoni ndodhet në këndin e poshtëm djathtas.
  • Përdor stilet – stil individual i butonit, i cili mund të vendoset në fushën më poshtë. Nëse kalohet në një vlerë negative, atëherë të gjitha cilësimet e stilit do të merren nga tema aktive e sajtit.
  • Stili i lidhjes - një fushë për futjen e parametrave të stilit të butonit.

Për të personalizuar stilin e butonit "lart", duhet të keni të paktën minimaleNjohuri CCS. Përndryshe, duhet të kaloni vlerën e parametrit të parafundit në "Jo".

Një nuancë tjetër e rëndësishme është se mbishkrimi i zakonshëm në ikonë përmban tekstin në anglisht: Kthehu në krye. Një tekst i tillë nuk mund të jetë i pranishëm në një faqe në gjuhën ruse, kështu që thjesht duhet ta çaktivizoni atë në parametrat e shtojcës ose ta ndryshoni në Rusisht.

Për të ndryshuar këtë mbishkrim, duhet të shkoni te serveri i faqes duke përdorur FTP ose menaxherin e skedarëve të integruar në host. Më pas, në drejtorinë "/administrator/language/en-GB/" ju duhet të gjeni një skedar të quajtur "en-GB.plg_system_topofthepage.ini".

Para se të ndryshoni tekstin, duhet të ndryshoni kodimin e këtij dokumenti në UTF-8. Kjo do të bëjë shfaqjen normale të shkronjave ruse.

Më pas gjejmë rreshtin e mëposhtëm:

" PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Kthehu në krye""

dhe ndryshoni frazën në thonjëza në Rusisht. Ju mund të përdorni fraza të tilla si "Lart!", "Në krye!" ose "Up!".

Në fund, do t'ju duhet të ruani skedarin e modifikuar dhe të kontrolloni butonin "lart" për sajtin në Joomla.

Butoni Up për Ucoz

butonin lëviz lart për faqen e internetit
butonin lëviz lart për faqen e internetit

Butoni "lart" për sajtin në Ucoz do të duhet të bëhet duke përdorur injektimin e kodit, pasi është e pamundur të lidhësh shtojcat për këtë CMS. Megjithatë, kjo nuk kërkon një studim të gjatë të skedarëve të sistemit dhe kërkimin e linjave të nevojshme, thjesht duhet të ngjitni një kod të vogël në vendin e duhur.

Për të na instaluarkërkohet:

  • shkoni te "Paneli i kontrollit -> Dizajni -> Menaxhimi i dizajnit (shabllonet) -> Fundi i faqes;
  • fut skriptin (mund të gjendet në faqen zyrtare të projektit dhe burimet e palëve të treta).

Përfundim

Pas kësaj, një ikonë do të shfaqet në këndin e poshtëm djathtas, duke e zhvendosur përdoruesin në krye të faqes.

Siç mund ta shihni, konfigurimi i butonit prapa për cilindo nga CMS nuk ishte veçanërisht i vështirë. Mund të përdorni si një metodë instalimi të automatizuar (plugins) ashtu edhe një manual. Megjithatë, opsioni i fundit mbetet më i përshtatshmi, pasi nuk ndikon negativisht në performancën e faqes.

Mund të përdorni butonin "kthim në krye" për një sajt HTML për të minimizuar konsumin e burimeve të sajtit, pasi një numër i madh shtesash mund të kenë një ndikim negativ në performancën e burimit. Një shtesë e butonit "lart" nuk do të jetë në gjendje të ndikojë shumë në kohën e ngarkimit të faqeve të faqes, por në shumicën e rasteve përdoruesi ka të paktën një duzinë shtojcash të instaluara në CMS. Në këtë rast, çdo shtojcë mund të ndikojë negativisht në performancën e faqeve të faqes.

Recommended: