Vietnes poga uz augšu: kā to izdarīt

Satura rādītājs:

Vietnes poga uz augšu: kā to izdarīt
Vietnes poga uz augšu: kā to izdarīt
Anonim

Tāda funkcija kā vietnes poga "uz augšu" padara interneta resursu ērtāku tā apmeklētājiem. Tas palīdz ērti pārvietoties no jebkuras lapas vietas uz lapas augšdaļu. Tas ir obligāts tiešsaistes veikaliem un vietnēm, kurās ir lieli raksti, kas ilgi jāritina uz leju.

Kam tas paredzēts

Šobrīd lielākajai daļai vietņu nav tādas funkcijas kā poga "augšup", un tajā nav nekā kritiska. Taču tā izmantošana var sniegt daudzas priekšrocības gan interneta resursam, gan tā apmeklētājiem.

Apmeklētāju ieguvums

Tā bieži notiek, ja interneta resursa lapa ir stipri noslogota ar informāciju, kad informatīvais raksts aizņem daudz vietas un ar peles ritenīti ir jāritina lapa uz leju. Papildus tam raksta beigās par to var būt daudz komentāru.

Kad apmeklētājs izlasa rakstu, lapas ritināšanā nav nekā nogurdinoša, bet, kad tekstam ir pienākušas beigas un jāvirzās uz augšu, sāk palikt mazliet nogurdinoši. Lielākā daļa cilvēku vienkārši būs pārāk slinki, lai ilgu laiku ritinātu, un viņi vienkārši aizvērs vietni, tā vietā, lai vēlreiz pastaigātos pa tās plašumiem.

Izmantojot pogulai uzreiz pārietu uz lapas augšdaļu, ir ērtāk pavadīt laiku vietnē.

Ieguvums interneta resursam

poga uz augšu vietnei
poga uz augšu vietnei

Pozitīvās īpašības pašam resursam nāk no pagātnes faktoriem, jo vieglāka navigācija vietnē uzlabo uzvedības faktorus, jo visi apmeklētāji būs aktīvāki savās darbībās un pāries uz citām lapām.

Tādējādi šie uzvedības faktori ietekmē visu meklētājprogrammu attieksmi pret vietni un uzlabo pozīcijas meklēšanas rezultātos.

Kā pats izveidot pogu "Uz augšu" vietnē

poga uz augšu html vietnei
poga uz augšu html vietnei

Darījumu tālāk. Jebkurā SPS vietnē vienmēr varat izveidot ritināšanas pogu uz augšu, veicot tikai dažas ārkārtīgi vienkāršas darbības:

  • attēla izveide;
  • skripta izveide;
  • izveidot pogas stilu;
  • pievienošana vietnei.

Pogas attēls

Lai vietnē pievienotu pogu "augšup", vispirms jāizveido pati ikona, noklikšķinot, lietotājs pāries uz lapas augšdaļu. Lai to izdarītu, varat izmantot gatavas iespējas, starp kurām vienmēr varat izvēlēties piemērotāko.

Lai uzlabotu pogas izskatu, mums ir jāveic daži uzlabojumi, proti, jāizveido sprite, kas ļauj apvienot fona attēlus, pamatojoties uz CSS, tādējādi izveidojot no tiem animāciju.

Grafikas darbiem varat izmantot jebkuru redaktoru. Bet visērtākā iespēja būtu tiešsaistes pakalpojums. PIXLR, jo šeit nav ko lejupielādēt un varat to izmantot tieši savā pārlūkprogrammā.

Lai sāktu, parādītajā redaktora logā atlasiet lauku Augšupielādēt attēlu no datora. Kā piemēru ņemsim raķetes attēlu.

kā izveidot pogu vietnē
kā izveidot pogu vietnē

Ja atlasītās ikonas izmēri ir pārāk lieli, jums būs jāveic neliela izmēra pielāgošana. Lai to izdarītu, dodieties uz augšējo izvēlni un atlasiet lauku "Rediģēt" un pēc "Free transform…"

Tālāk pie attēla parādās speciāli marķieri, kurus pārvietojot var mainīt attēla izmēru. Lai saglabātu proporcijas, varat izmantot taustiņu Shift, turot to, lai pārvietotu zilos marķierus. Šo darbību beigās tiek iegūts raķetes attēls.

Nākamais solis ir izveidot slāņa kopiju.

Tagad jums ir jāpārvieto raķetes attēls no jaunā slāņa mazliet uz augšu. Lai to izdarītu, būs ērti izmantot pārvietošanas rīku, kas atrodas kreisās izvēlnes otrajā kolonnā, un tastatūras augšupvērsto bultiņu.

Tagad mums ir jāpadara augšējais attēls melnb alts. To var izdarīt, izmantojot augšējās izvēlnes vienumu "Korekcija" - "Hue / Saturation". Lai pilnībā samazinātu piesātinājumu, piesātinājuma slīdnim jābūt iestatītam uz -100. Šī darbība ļaus jums izveidot efektu, kurā poga "Uz augšu" pārvēršas no melnb altas uz krāsainu, kad virzīsiet kursoru virs tās.

Pēdējais pieskāriens ir papildu vietas noņemšana ap diviem attēliem. Lai to izdarītu, kreisajā izvēlnē atlasiet vienumu "Apgriezt" unmēs izvēlamies tikai divas raķetes taisnstūrī. Lai veiktu apgriešanu, tiek nospiests taustiņš Enter.

Rezultāts ir attēls, kurā nav papildu brīvas vietas. Jums būs jāpieraksta iegūtā attēla platums un augstums, jo šie dati būs noderīgi nākamajā darbībā.

kā izveidot pogu vietnē
kā izveidot pogu vietnē

Lai saglabātu, jānoklikšķina uz "Fails" - "Saglabāt", kur kreisajā rindkopā "Mans dators" ierakstām attēla nosaukumu (tikai angļu valodas izkārtojums), izvēlieties formātu (šajā burts, PNG) un noklikšķiniet uz pogas "Jā".

Fails ar pogas "augšup" skriptu

Šajā gadījumā jums nav jāraksta skripts. Būs iespējams izmantot publisko versiju, veicot dažus grozījumus gatavajā kodā.

Lai to izdarītu, jums ir jālejupielādē jebkurš koda redaktors. Populārākā un arī bezmaksas iespēja ir Notepad++. Pēc tā instalēšanas jums ir jākopē un jāielīmē viss šis kods:

$(dokuments).ready(function(){ $(window).scroll(function () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} else {$('scroller').fadeOut();}}); $('scroller').click(function () {$('body, html').animate({scrollTop: 0}, 400); return false;}); });

Tālāk noklikšķiniet augšējā izvēlnē "Fails" - "Saglabāt kā …", pēc kura mēs saglabājam kodu.js formātā. Pēc tam varat izmantot šo kodu savā vietnē, augšupielādējot tajā skriptu failus un attēlus, izmantojot FTP savienojumu.

Instalējiet vietnē

Lai vietnei iestatītu ritināšanas pogu uz augšu, ir jāievietonepieciešamais vietas kods. Tas ir jāievada pirms taga.

Pogas stila izveide, izmantojot CSS

Visbiežāk vietnes poga "uz augšu" atrodas apakšā ("kājene").

Vietnes failam style.css ir jāpievieno šāds kods:

/Poga uz augšu/

.scrollTop{

background:url('images/up.png') 0 0 no-repeat;/vietējā attēla ceļš/

width:39px;/ poga platums/

height:96px;/50% pogas augstums/

bottom:5px;/apakšā polsterējums fiksētā pozīcijā/

pa kreisi:89%;/shift pa kreisi/

}.scrollTop:hover{ background-position:0 -108px; } /fona nobīde/"

Šajā gadījumā būs nepieciešami attēla platuma un augstuma dati. Atliek tikai ievadīt saņemtos datus kodā, un vietnes poga "uz augšu" būs gatava! Kas vēl?

Poga Augšup Wordpress vietnei

kā izveidot pogu vietnē
kā izveidot pogu vietnē

Šai SPS pogu "Uz augšu" var izveidot, izmantojot spraudņus, kā arī neatkarīgi.

Spraudņu metode ir visērtākā un vienkāršākā instalēšana, jo ir tikai jānoklikšķina uz instalēšanas pogas un jākonfigurē visas funkcionalitātes spraudņa izvēlnē.

Pēdējā izvēle ir jāpieiet piesardzīgi, jo ar to vietnē būs viegli iegūt vīrusu. Vispopulārākā un pārbaudītākā iespēja ir spraudnis ar nosaukumu Scroll Back To Top. Varat to lejupielādēt, izmantojot standarta Wordpress spraudņu meklēšanu.

Šim paplašinājumam irvairākas funkcionalitātes, un būs ļoti vienkārši pielāgot pogu "augšup" Wordpress vietnei. Visas vērtības vispār nav jāmaina, ir tikai jākonfigurē pogas izskats un atrašanās vieta vietnes lapā.

Kā redzat, pogas iestatīšana ar spraudņiem ir ļoti vienkārša. Bet ir viena svarīga nianse, proti, katrs instalētais spraudnis ielādē CMS. Tas var ietekmēt interneta resursa ātrumu. Tāpēc lielākā daļa vietņu īpašnieku visas izmaiņas cenšas veikt tieši kodā, nevis ar trešo pušu paplašinājumu palīdzību. HTML vietnei varat izveidot pogu “Uz augšu”, kas samazinās patērētos resursus.

Pirms mainīt visus Wordpress sistēmas failus, tie ir jādublē. Pēc tam varat veikt visas iepriekš aprakstītās darbības, lai izveidotu savu pogu.

Poga "augšup" Joomla

poga uz augšu Joomla 3 vietnei
poga uz augšu Joomla 3 vietnei

CMS Joomla atbalsta arī spraudņu, piemēram, Wordpress, instalēšanu. Joomla 3 vietnes visveiksmīgākā pogas “augšup” versija ir paplašinājums ar nosaukumu Lapas augšdaļa.

Šajā SPS jebkuru spraudni var instalēt, izmantojot paplašinājumu pārvaldnieku. Šim nolūkam jums ir nepieciešams:

  • lejupielādējiet spraudni internetā;
  • paplašinājumu pārvaldniekā noklikšķiniet uz pogas Pārlūkot;
  • atlasiet lejupielādēto arhīvu;
  • noklikšķiniet uz "Lejupielādēt" un instalējiet.

Tagad jums tas jāaktivizē spraudņu pārvaldniekā. Priekš šījums jāiet uz šo sadaļu, jāatrod spraudnis un jāpārslēdz tā statuss uz "iespējots".

Nākamā darbība ir visu paplašinājumu parametru konfigurēšana, izmantojot to pašu sadaļu, kur labajā pusē jāatrod šī spraudņa "Pamata parametri".

Lapas augšpusē ir šāda funkcionalitāte:

  • Ieslēgt/ administrators - iespējot šo opciju ne tikai interneta resursā, bet arī pašā Joomla CMS panelī.
  • Button Reveal Position - cik pikseļi lietotājam ir jāatt, lai parādītos poga uz augšu.
  • Izlaist pogas tekstu - teksta klātbūtne uz pogas.
  • Vienmēr augšpusē - vietnes lapa vienmēr tiks rādīta no tās augšdaļas. Ja izmantojat enkurus, lai ritinātu uz noteiktu vietu lapā, šī opcija nav jāiespējo.
  • Smooth Scroll - padara lapas ritināšanu vienmērīgāku.
  • Scroll Duration - laiks, pēc kura lapa pilnībā pāries uz sākumu.
  • Scroll Transition - pievieno ritināšanai vairāk vizuālo efektu.
  • Pārejas atvieglošana - kustības "vājināšana" uz lapas augšdaļu.
  • Saites atrašanās vieta - ikonas atrašanās vieta. Pēc noklusējuma poga atrodas apakšējā labajā stūrī.
  • Use Styles – individuāls pogas stils, ko var iestatīt zemāk esošajā laukā. Ja pārslēgts uz negatīvu vērtību, visi stila iestatījumi tiks ņemti no vietnes aktīvās tēmas.
  • Saites stils - lauks pogas stila parametru ievadīšanai.

Lai pielāgotu pogas "Uz augšu" stilu, jums ir jābūt vismaz minimālamCCS zināšanas. Pretējā gadījumā jums vajadzētu pārslēgt priekšpēdējā parametra vērtību uz "Nē".

Vēl viena svarīga nianse ir tāda, ka parastajā uzrakstā uz ikonas ir teksts angļu valodā: Return to Top. Šāds teksts nevar būt vietnē krievu valodā, tāpēc jums tas vienkārši jāatspējo spraudņa parametros vai jāmaina uz krievu valodu.

Lai mainītu šo uzrakstu, jums jādodas uz vietnes serveri, izmantojot FTP vai mitināšanā iebūvēto failu pārvaldnieku. Pēc tam direktorijā "/administrator/language/en-GB/" ir jāatrod fails ar nosaukumu "en-GB.plg_system_topofthepage.ini".

Pirms teksta maiņas nomainiet šī dokumenta kodējumu uz UTF-8. Tādējādi tiks parādīti normāli krievu burti.

Tālāk mēs atrodam šādu rindiņu:

" PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Atgriezties uz augšu""

un nomainiet frāzi pēdiņās uz krievu valodu. Varat izmantot tādas frāzes kā "Uz augšu!", "Uz augšu!" vai “Uz augšu!”.

Beigās jums būs jāsaglabā modificētais fails un jāpārbauda, vai vietnē Joomla nav pogas "uz augšu".

Uz augšu poga Ucoz

vietnes ritināšanas poga
vietnes ritināšanas poga

Ucoz vietnes poga “Uz augšu” būs jāveic, izmantojot koda ievadīšanu, jo šai CMS nav iespējams pievienot spraudņus. Tomēr tas neprasa ilgu sistēmas failu izpēti un nepieciešamo rindu meklēšanu, jums tikai jāielīmē neliels kods pareizajā vietā.

Lai mūs instalētunepieciešams:

  • iet uz "Vadības panelis -> Dizains -> Dizaina pārvaldība (veidnes) -> Vietnes apakšdaļa;
  • ievietojiet skriptu (var atrast projekta oficiālajā tīmekļa vietnē un trešo pušu resursos).

Secinājums

Pēc tam apakšējā labajā stūrī parādīsies ikona, kas novirzīs lietotāju uz pašu lapas augšdaļu.

Kā redzat, pogas Atpakaļ iestatīšana nevienai no CMS nebija īpaši sarežģīta. Varat izmantot gan automātisko instalēšanas metodi (spraudņus), gan manuālo. Tomēr pēdējā iespēja joprojām ir vispiemērotākā, jo tā negatīvi neietekmē vietnes veiktspēju.

Varat izmantot pogu "Atpakaļ uz augšu" HTML vietnei, lai samazinātu vietnes resursu patēriņu, jo liels skaits paplašinājumu var negatīvi ietekmēt resursa veiktspēju. Viens "augšup" pogas spraudnis nevarēs īpaši ietekmēt vietnes lapu ielādes laiku, taču vairumā gadījumu lietotājam CMS ir instalēti vismaz ducis spraudņu. Šādā gadījumā jebkurš spraudnis var negatīvi ietekmēt vietnes lapu veiktspēju.

Ieteicams: