Selline funktsioon nagu saidi "üles"-nupp muudab Interneti-ressursi külastajate jaoks mugavamaks. See aitab teil hõlps alt kõikj alt lehelt lehe ülaossa liikuda. See on kohustuslik veebipoodide ja suurte artiklitega saitidele, mis nõuavad pikka allakerimist.
Mille eest?
Praegu pole enamikul saitidel sellist funktsiooni nagu "üles" nupp ja selles pole midagi kriitilist. Kuid selle kasutamine võib tuua palju eeliseid nii Interneti-ressurssidele kui ka selle külastajatele.
Kasu külastajatele
See juhtub sageli siis, kui Interneti-ressursi leht on teabega palju koormatud, kui teabeartikkel võtab palju ruumi ja peate lehte hiirerattaga allapoole kerima. Lisaks sellele võib artikli lõpus olla selle kohta palju kommentaare.
Kui külastaja loeb artiklit, ei ole lehe alla kerimises midagi väsitavat, kuid kui tekst on lõppenud ja peate üles liikuma, hakkab see veidi tüütuks muutuma. Enamik inimesi on lihts alt liiga laisad, et pikka aega kerida, ja nad lihts alt sulgevad saidi, selle asemel, et uuesti selle avarustes ringi jalutada.
Nupu kasutaminekoheselt lehe ülaossa liikumine muudab saidil aja veetmise mugavamaks.
Kasu Interneti-ressurssidele
Ressursi enda positiivsed küljed tulenevad varasematest teguritest, kuna saidil lihtsam navigeerimine parandab käitumuslikke tegureid, kuna kõik külastajad on oma tegevuses aktiivsemad ja liiguvad teistele lehtedele.
Seega mõjutavad need käitumuslikud tegurid kõigi otsingumootorite suhtumist saidi ja toovad kaasa positsiooni paranemise otsingutulemustes.
Kuidas saidil ise nuppu "üles" teha
Tegelemine edasi. Saate alati luua saidi jaoks üleskerimisnupu mis tahes CMS-is, järgides vaid mõnda väga lihtsat sammu:
- pildi loomine;
- skripti loomine;
- loo nupustiil;
- saidile lisamine.
Nupu pilt
Saidile nupu "üles" lisamiseks tuleb esm alt teha ikoon ise, klõpsamisel liigub kasutaja lehe ülaossa. Selleks saate kasutada valmisvalikuid, mille hulgast saate alati valida sobivaima.
Nupu välimuse parandamiseks peame tegema mõningaid täiustusi, nimelt tegema spraiti, mis võimaldab kombineerida CSS-il põhinevaid taustapilte, luues seeläbi neist animatsiooni.
Graafiliste tööde jaoks võite kasutada mis tahes redaktorit. Kuid kõige mugavam valik oleks võrguteenus. PIXLR, kuna siit pole midagi alla laadida ja saate seda otse brauseris kasutada.
Alustamiseks valige ilmuvas redaktori aknas väli "Laadi pilt arvutist üles". Võtame näiteks raketi kujutise.
Kui valitud ikooni mõõtmed on liiga suured, peate selle suurust väikeseks kohandama. Selleks minge ülemisse menüüsse ja valige väli "Muuda" ning pärast "Tasuta teisendus …"
Järgmisena ilmuvad pildi kõrvale spetsiaalsed markerid, mida liigutades saab muuta pildi suurust. Proportsioonide säilitamiseks võite kasutada klahvi Shift, mille all hoides peate liigutama siniseid markereid. Nende sammude lõpus saadakse raketi kujutis.
Järgmine samm on kihi koopia loomine.
Nüüd peate raketi pilti uuest kihist veidi ülespoole nihutama. Selleks on mugav kasutada vasakpoolse menüü teises veerus asuvat teisaldamistööriista ja klaviatuuri ülesnoolt.
Nüüd peame ülemise pildi tegema mustvalgeks. Seda saab teha ülamenüü üksuse "Parandus" - "Hue / Saturation" abil. Täielikuks küllastumiseks tuleb liugur Küllastus olla seatud väärtusele -100. See toiming võimaldab teil luua efekti, kus nupp "Üles" muutub mustvalgest värviliseks, kui hõljutate kursorit selle kohal.
Viimane lihv on lisaruumi eemaldamine kahe pildi ümbert. Selleks valige vasakpoolsest menüüst üksus "Kärbi" jaristkülikust valime ainult kaks raketti. Kärpimiseks vajutage sisestusklahvi.
Tulemuseks on pilt, millel pole vaba ruumi. Peate üles kirjutama saadud pildi laiuse ja kõrguse, kuna need andmed on kasulikud järgmises etapis.
Salvestamiseks peate klõpsama nuppu "Fail" - "Salvesta", kus vasakpoolses lõigus "Minu arvuti" kirjutame pildi nime (ainult ingliskeelne paigutus), valige vorming (selles suurtäht, PNG) ja klõpsake nuppu "Jah".
Fail nupu "üles" skriptiga
Sel juhul ei pea te skripti kirjutama. Võimalik on kasutada avalikku versiooni, tehes valmis koodis mõningaid muudatusi.
Selleks peate alla laadima mis tahes koodiredaktori. Kõige populaarsem ja ka tasuta valik on Notepad++. Pärast selle installimist peate kogu selle koodi sellesse kopeerima ja kleepima:
| $(document).ready(function(){ $(window).scroll(function () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} else {$('scroller').fadeOut();}}); $('scroller').click(function () {$('body, html').animate({scrollTop: 0}, 400); tagasta vale;}); }); |
Järgmisena klõpsake ülemises menüüs "Fail" - "Salvesta kui …", misjärel salvestame koodi.js-vormingus. Pärast seda saate seda koodi oma saidil kasutada, laadides sellele FTP-ühenduse abil üles skriptifailid ja pildid.
Installi kohapeal
Saidi üleskerimisnupu määramiseks peate sisestamanõutav kohakood. Peate selle sisestama enne märgendit.
Nupu stiili loomine CSS-iga
Enamasti asub saidi nupp "üles" allservas ("jalus").
Saidi faili style.css tuleb lisada järgmine kood:
|
/nupp üles/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/native image path/ width:39px;/ nupp laius/ height:96px;/50% nupu kõrgus/ bottom:5px;/põhja polster fikseeritud asendis/ left:89%;/nihuta vasakule/ }.scrollTop:hover{ background-position:0 -108px; } /tausta nihe/" |
Sel juhul on vaja neid pildi laiuse ja kõrguse andmeid. Jääb vaid sisestada saadud andmed koodi ja saidi nupp "üles" on valmis! Mida veel?
Wordpressi saidi ülesnupp
Selle CMS-i puhul saab nuppu "Üles" teha nii pistikprogrammide abil kui ka iseseisv alt.
Pluginate meetod on kõige mugavam ja hõlpsamini installitav, kuna selleks peate klõpsama installinupul ja konfigureerima kõik pistikprogrammi menüüs olevad funktsioonid.
Viimase valikusse tuleks suhtuda ettevaatlikult, kuna sellega on saidil viirust lihtne hankida. Kõige populaarsem ja end tõestanud valik on pistikprogramm nimega Scroll Back To Top. Saate selle alla laadida Wordpressi pistikprogrammide standardotsingu abil.
Sellel laiendusel onmitut funktsiooni ja Wordpressi saidi nuppu "üles" on väga lihtne kohandada. Kõiki väärtusi pole vaja üldse muuta, peate konfigureerima ainult nupu välimuse ja asukoha saidi lehel.
Nagu näete, on pistikprogrammide nupu seadistamine väga lihtne. Kuid on üks oluline nüanss, milleks on see, et iga installitud pistikprogramm laadib CMS-i. See võib mõjutada Interneti-ressursi kiirust. Seetõttu püüab enamik saidiomanikke teha kõik muudatused otse koodis, mitte kolmanda osapoole laienduste abil. Saate HTML-saidi jaoks teha nupu "üles", mis vähendab kulutatud ressursse.
Enne kõigi Wordpressi süsteemifailide muutmist peate need varundama. Seejärel saate järgida kõiki ülalkirjeldatud samme, et luua oma nupp.
Joomla nupp "üles"
CMS Joomla toetab ka pistikprogrammide (nt Wordpressi) installimist. Joomla 3 saidi nupu "üles" edukaim versioon on laiendus nimega Top of the Page.
Selles CMS-is saab laiendushalduri kaudu installida mis tahes pistikprogrammi. Selleks vajate:
- laadige pistikprogramm Internetist alla;
- klõpsake laiendushalduris nuppu "Sirvi";
- valige allalaaditud arhiiv;
- klõpsake "Laadi alla" ja installige.
Nüüd peate selle "Plugin Manageris" aktiveerima. Selle jaokspeate minema sellesse jaotisesse, leidma pistikprogrammi ja muutma selle olekuks "lubatud".
Järgmine samm on kõigi laienduse parameetrite konfigureerimine, kasutades sama jaotist, kust peate leidma parem alt selle pistikprogrammi põhiparameetrid.
Lehe ülaosas on järgmised funktsioonid:
- Käivita/administraator – valiku lubamine mitte ainult Interneti-ressursil, vaid ka Joomla CMS-i paneelil endal.
- Button Reveal Position – mitu pikslit peab kasutaja üles kerima, et üles ilmuks.
- Jäta nupu tekst välja – teksti olemasolu nupul.
- Alati ülaosas – saidi leht kuvatakse alati ülev alt. Kui kasutate lehel kindlasse kohta kerimiseks ankruid, ei pea seda valikut lubama.
- Smooth Scroll – muudab lehe kerimise sujuvamaks.
- Scroll Duration – aeg, mille möödudes liigub leht täielikult algusesse.
- Scroll Transition – lisab kerimisele rohkem visuaalseid efekte.
- Transition Easing – liikumise "nõrgestamine" lehe ülaossa.
- Lingi asukoht – ikooni asukoht. Vaikimisi asub nupp paremas alanurgas.
- Kasuta stiile – individuaalne nupu stiil, mida saab määrata alloleval väljal. Kui lülitatakse negatiivsele väärtusele, võetakse kõik stiiliseaded saidi aktiivsest teemast.
- Link Style – väli nupu stiili parameetrite sisestamiseks.
Ülesnupu stiili kohandamiseks peab teil olema vähem alt minimaalneCCS teadmised. Vastasel juhul peaksite eelviimase parameetri väärtuseks muutma "Ei".
Teine oluline nüanss on see, et tavaline ikooni pealdis sisaldab ingliskeelset teksti: Return to Top. Sellist teksti ei saa venekeelsel saidil olla, seega peaksite selle lihts alt pistikprogrammi parameetrites keelama või muutma selle venekeelseks.
Selle kirje muutmiseks peate minema saidi serverisse, kasutades FTP-d või hostimisse sisseehitatud failihaldurit. Järgmiseks peate kataloogist "/administrator/language/en-GB/" leidma faili nimega "en-GB.plg_system_topofthepage.ini".
Enne teksti muutmist peaksite muutma selle dokumendi kodeeringuks UTF-8. See muudab vene tähtede tavaliseks kuvamiseks.
Järgmisena leiame järgmise rea:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Tagasi üles"" |
ja muutke jutumärkides olev fraas venekeelseks. Võite kasutada fraase nagu "Üles!", "Tippu!" või "Üles!".
Lõpus peate salvestama muudetud faili ja kontrollima Joomla saidi nuppu "üles".
Ucozi ülesnupp
Ucozi saidi nupp "üles" tuleb teha koodisüstiga, kuna selle CMS-i pistikprogramme on võimatu ühendada. Kuid see ei nõua süsteemifailide pikka uurimist ja vajalike ridade otsimist, peate lihts alt kleepima väikese koodi õigesse kohta.
Meie installimiseksnõutav:
- mine "Juhtpaneel -> Kujundus -> Kujundushaldus (mallid) -> Saidi allosas;
- sisestage skript (leiate projekti ametlikult veebisaidilt ja kolmandate osapoolte ressurssidest).
Järeldus
Pärast seda ilmub paremasse alanurka ikoon, mis viib kasutaja lehe ülaossa.
Nagu näete, ei olnud ühegi CMS-i tagasinupu seadistamine eriti keeruline. Võite kasutada nii automaatset installimeetodit (pluginad) kui ka käsitsi installimist. Viimane variant jääb siiski kõige sobivamaks, kuna see ei mõjuta negatiivselt saidi toimivust.
Saate HTML-saidi puhul kasutada nuppu "Tagasi üles", et minimeerida saidi ressursside tarbimist, kuna suur hulk laiendusi võib ressursi jõudlust negatiivselt mõjutada. Üks "üles" nupu plugin ei suuda saidi lehtede laadimisaega oluliselt mõjutada, kuid enamasti on kasutajal CMS-i installitud vähem alt kümmekond pluginat. Sel juhul võib iga pistikprogramm saidi lehtede toimivust negatiivselt mõjutada.
