/ / Poga "uz augšu" vietnei: kā to izdarīt

Vietnes augšdaļas poga "Uz augšu": kā to izdarīt

Šī funkcija, piemēram, vietnes pogas "uz augšu"padara interneta resursus ērtākiem apmeklētājiem. Tas palīdz viegli pārvietoties no jebkuras lapas lapas uz augšu. Tas ir nepieciełams tiešsaistes veikaliem un vietnēm ar lieliem rakstiem, kas prasa ilgu ritināšanu uz leju.

Kas tas ir?

Šobrīd lielākajā daļā šādu vietņufunkcijas, piemēram, pogas "uz augšu", nē, un par to nav nekā kritiska. Bet tā izmantošana var dot daudz plusi gan interneta resursam, gan tā apmeklētājiem.

Ieguvumi apmeklētājiem

Tas bieži notiek, kad interneta resursa lapair ļoti slodze ar informācijas daudzumu, kad informācijas rakstu aizņem daudz vietas, un jums ir jāpārvieto leju ar peles ritenīti. Papildus tam raksta beigās var būt daudz komentāru.

Kad apmeklētājs raksta rakstu, nekasgarlaicīgs, ritinot lapas leju, nav, bet, kad teksts ir beidzies un ir nepieciešams virzīties uz augšu, tas mazliet sliecas. Lielākā daļa cilvēku vienkārši būs pārāk slinki, lai vadītu garu ritināšanu, un viņi vienkārši aizver vietni, nevis turpinās staigāt pa tās plašumiem.

Izmantojot pogu, lai uzreiz pārietu uz lapas augšdaļu, padarīt spēli vietnē ērtāk.

Ieguvumi no interneta resursiem

pogas uz augšu vietnei

No pašu resursa nāk pozitīvās pusesNo iepriekšējiem faktoriem, jo ​​tā ir vieglāk orientēties vietā uzlabo uzvedības faktorus, jo visi apmeklētāji būs aktīvāki savās darbībās un pāriet uz citām lapām.

Līdz ar datu uzvedības faktori ietekmē attieksmi visām meklētājprogrammām uz vietas un radīt labāku vietu meklēšanas rezultātos.

Kā padarīt pogu "uz augšu" uz vietas pats

pogu uz html vietni

Mēs saprotam tālāk. Vietnes ritināšanas uz augšu jebkurā CMS vienmēr var izdarīt pats, tikai dažas ļoti vienkāršas darbības:

  • izveidojot attēlu;
  • Skripta izveide;
  • pogas stila izveide;
  • pievienojot vietnei.

Pogas attēls

Lai vietnē pievienotu pogu "uz augšu", laijums būs jāveido pati ikona, kad to noklikšķina, lietotājs pārvietos lapu uz augšu. Lai to izdarītu, varat izmantot gatavas opcijas, no kurām jūs vienmēr varat izvēlēties vispiemērotāko.

Lai uzlabotu pogas izskatu, jums ir jāveic daži uzlabojumi, proti, lai izveidotu spritu, kas ļauj apvienot fona attēlus, pamatojoties uz CSS, tādējādi radot animāciju no tām.

Grafiskiem darbiem varat izmantot jebkuru redaktoru. Bet ērtākais variants ir tiešsaistes pakalpojums Pixlr, jo nekas, lai lejupielādētu un nav nepieciešams, jūs varat tos izmantot tieši jūsu pārlūkprogrammā.

Lai sāktu darbu redzamajā redaktora logā, izvēlieties lauku "Augšupielādēt attēlu no datora". Piemēram, uzņemiet raķešu attēlu.

kā izveidot pogu uz vietnes

Ja izvēlētās ikonas lielums ir pārāk liels, tadjums būs jāveic neliela korekcija pēc izmēra. Lai to paveiktu, dodieties uz augšējo izvēlni un atlasiet lauku "Rediģēt" un pēc tam "Bezmaksas pārveidot ..."

Nākamais blakus attēlam ir īpašsMarķieri, pārvietojot to, jūs varat mainīt attēla izmēru. Lai saglabātu proporcijas, varat izmantot Shift taustiņu, piespiežot to, lai pārvietotu zilos marķierus. Šo darbību beigās iegūst raķešu tēlu.

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

Tagad jums ir jāpārvieto raķešu attēls nojauns slānis nedaudz uz augšu. Lai to izdarītu, būs ērti izmantot pārvietošanas rīku, kas atrodas kreisās izvēlnes otrajā slejā un tastatūras bultiņu "uz augšu".

Tagad jums ir jāizdara augšējā attēla melnbaltā krāsā. To var izdarīt, izmantojot vienumu "Korekcija" - "Hue / Saturation" no augšējā izvēlnē. Lai pilnībā mainītu krāsu, slīdņa saturam jābūt iestatītam uz -100. Šī darbība dos efektu, ka "Up" pogu pārslēdzas no melnā un baltā krāsu, kad jūs lidināties virs tā.

Pēdējais pieskāriens ir liekās vietas likvidēšanaap divām bildēm. Lai to izdarītu, kreisajā izvēlnē izvēlieties elementu "Apgriezt" un taisnstūrī izvēlieties tikai divas raķetes. Lai veiktu apgriešanu, nospiediet taustiņu Enter.

Rezultāts ir attēls, kurā nav liekas vietas. Būs nepieciešams ierakstīt iegūto attēlu platumu un augstumu, jo šie dati būs noderīgi nākamajā solī.

kā izveidot pogu uz vietnes

Lai saglabātu, noklikšķiniet uz "File" -"Saglabāt", kur kreisajā vienībā "Mans dators" ieraksta attēla nosaukumu (tikai angļu izkārtojums), atlasiet formātu (šajā gadījumā - PNG) un noklikšķiniet uz pogas "Jā".

Fails ar pogas uz augšu skriptu

Šajā gadījumā jums nav nepieciešams rakstīt skriptu. Varēsiet izmantot publisko iespēju, izdarot dažus labojumus gatavajam kodam.

Lai to paveiktu, jums ir nepieciešams lejupielādēt jebkuru kodu redaktoru. Populārākā un bezmaksas versija ir Notepad ++. Pēc tā instalēšanas jums ir nepieciešams kopēt un ielīmēt visu šo kodu:

<script type = "text / javascript"> $ (dokuments).gatavs (funkcija () {$ (logs) .scroll (funkcija () {if ($ (šis) .scrollTop ()> 0) {$ ( "# scroller") fadeIn () ;.} else {$ ( "# scroller ") Izidšanas ();.}}) $ (" # scroller ") klikšķis (function () {$ (". ķermeni, html ") dzīva ({scrollTop :. 0}, 400); return false;} );}); </ script>

Pēc tam noklikšķiniet uz augšējās izvēlnes "Fails" - "Saglabāt"kā ... ", tad mēs saglabājam kodu .js formātā. Pēc tam jūs varat izmantot šo kodu savā vietnē, augšupielādējot skripta failus un attēlus, izmantojot FTP savienojumu.

Uzstādīšana vietnē

Lai vietne uzstādītu ritināšanas taustiņu, jums jāievieto kods vēlamajā vietā. Jums tas jāievada pirms marķējuma </ body>.

Pogas stila izveide CSS

Visbiežāk vietnes pogas "uz augšu" atrodas apakšā ("pagrabs").

Vietnes stilā. CSS failā jums jāievada šāds kods:

"/ * Pogas uz augšu * /

. scrollTop {
fons: url ("images / up.png") 0 0 no-repeat; / * vienkāršs ceļš uz attēlu * /
platums: 39 pikseļi; / * pogas platums * /
augstums: 96px; / * 50% no pogas augstuma * /
apakšā: 5px; / * fiksētam stāvoklim, ievilkums no apakšas * /
pa kreisi: 89%; / * kreisais nobīde * /
}
. scrollTop: hover {background-position: 0 -108px; } / * fona nobīde * / "

Šajā gadījumā jums ir nepieciešams datu platums un attēla augstums. Joprojām ir tikai ievadīt datus kodā, un pogai "uz augšu" vietne būs gatava! Kas vēl?

Augšupielādēt WordPress vietni

kā izveidot pogu uz vietnes

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

Metode ar spraudņiem ir ērtākais un viegli instalējams, jo tas prasa tikai noklikšķinot uz instalēšanas pogas un pielāgot visas spraudņu izvēlnes funkcionalitāti.

No tā jāizvēlas pēdējā izvēlepiesardzīgi, jo kopā ar to vietnē būs iespējams viegli iegūt vīrusu. Vispopulārākais un pārbaudītākais risinājums ir plug-in ar nosaukumu Ritināt uz augšu. Jūs to varat lejupielādēt, izmantojot standarta Wordpress spraudņu meklēšanu.

Šim paplašinājumam ir vairākifunkcionāls, un WordPress vietnē būs ļoti vienkāršs pogas "uz augšu" individualizēšana. Visas vērtības nav jāmaina vispār, tikai vietnes lapā ir jākonfigurē pogas izskats un atrašanās vieta.

Kā redzat, iestatiet pogu arspraudņi ir ļoti vienkārši. Bet ir viens svarīgs niansējums, ka 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 mēģina veikt visas izmaiņas tieši kodā, nevis ar trešo pušu paplašinājumu palīdzību. Jūs varat padarīt pogu "uz augšu" vietnei HTML, tādējādi samazinot izmantotos resursus.

Pirms visu sistēmas failu maiņas WordPress ir jāizveido to rezerves kopijas. Tālāk jūs varat izpildīt visas darbības, lai izveidotu savu pogu, kas aprakstīts iepriekš.

Knoka "up" par Joomla

pogas uz joomla 3

CMS Joomla atbalsta arī spraudņu instalēšanu, piemēram, Wordpress. Veiksmīgākā pogas "uz augšu" versija vietnei Joomla 3 ir paplašinājums, kas tiek saukts par lapas augšdaļu.

Šajā CMS jebkuru spraudni var instalēt, izmantojot paplašinājuma pārvaldnieku. Lai to izdarītu, jums ir nepieciešams:

  • lejupielādēt spraudni internetā;
  • Extension Manager pārvaldītajā pogā "Pārlūkot";
  • izvēlieties lejupielādēto arhīvu;
  • noklikšķiniet uz "Lejupielādēt" un instalējiet.

Tagad tas ir jāaktivizē "Plugin Manager". Lai to paveiktu, dodieties uz šo sadaļu, atrodiet spraudni un pārslēdziet to stāvokli uz "ieslēgts".

Pēc tam jūs konfigurēsit visas paplašinājuma opcijas, izmantojot to pašu sadaļu, kur jums vajadzēs atrast šī spraudņa "Pamatparametrus" labajā pusē.

Lapas augšpusē ir šāda funkcija:

  • Run in / administrators - iespējojiet iespēju ne tikai interneta resursā, bet arī pašā CMS Joomla.
  • Pogas Atvērt pozīciju - cik pikseļu lietotājam vajadzētu pārtīt, lai parādītu "augšup" pogu.
  • Izlaist pogas tekstu - teksts pogai.
  • Vienmēr augšā - vietnes lapa vienmēr tiek rādīta no sākuma. Izmantojot "enkurs", lai ritinātu līdz noteiktai vietai lapā, šī opcija nav jāaktivizē.
  • Smooth Scroll - padara lapu ritināšanu gludāku.
  • Ritināšanas ilgums - laiks, kurā lapa pilnīgi pārvietojas sākumā.
  • Ritināšanas pāreja - pievieno ritināšanu lieliem vizuāliem efektiem.
  • Pārejas atvieglošana - "atvieglojot" pāreju uz lapas augšdaļu.
  • Saites atrašanās vieta - ikonas atrašanās vieta. Pēc standarta poga atrodas apakšējā labajā stūrī.
  • Izmantojiet stilus - pogas individuālo stilu, kuru var iestatīt tālāk redzamajā laukā. Ja pārejat uz negatīvu vērtību, tad visi stila iestatījumi tiks ņemti no aktīvās vietnes tēmas.
  • Saišu stils - lauks pogas stila iestatījumu ievadīšanai.

Lai pielāgotu pogas "uz augšu" stilu, jums ir jābūt vismaz minimālām CCS zināšanām. Pretējā gadījumā ir nepieciešams pārslēgt priekšpēdējā parametra vērtību uz "Nē".

Vēl viena svarīga nianse ir tāParastā uzraksts uz ikonas satur angļu valodas tekstu: Atgriezties augšā. Krievu valodā vietnē šāds teksts nav pieejams, tādēļ to vienkārši ieslēdziet spraudņa iestatījumos vai mainiet to krievu valodā.

Lai mainītu šo uzrakstu, dodieties uzservera vietne, izmantojot FTP vai iebūvēto hostinga failu pārvaldnieku. Tad direktorijā "/ administrator / language / en-GB /" jums jāatrod fails ar nosaukumu "en-GB.plg_system_topofthepage.ini".

Pirms teksta maiņas jums jāmaina šī dokumenta kodējums uz utf-8. Tas padarīs parasto krievu burti.

Tālāk mēs atrodam šādu rindu:

"PLG_SYS_TOPOFTHEPAGE_GOTOTOP =" Atgriezties augšā ""

un mainiet frāzi pēdiņās uz krievu valodu. Varat izmantot tādas frāzes kā "Uz augšu!", "Sākumā!" Vai "Uz augšu!".

Beigās jums būs nepieciešams saglabāt modificēto failu un pārbaudīt Joomla vietnes pogu uz augšu.

Ucoz uz augšu pogu

ritiniet uz augšu pogas vietnei

Ucoz vietnes augšupielādes poga būs jādaraizmantojot koda injekciju, jo spraudņus nevar pieslēgt šai CMS. Tomēr ilgs laiks, lai izpētītu sistēmas failus un meklētu nepieciešamās līnijas, ir nepieciešams tikai ievietot nelielu kodu pareizajā vietā.

Lai instalētu, mums būs nepieciešams:

  • dodieties uz "Vadības panelis -> Dizains -> Dizaina vadība (veidnes) -> Apakšējā vietne;
  • 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 novirza lietotāju uz pašas lapas augšdaļu.

Kā redzat, pogas "Uz augšu" uzstādīšanajebkura CMS nebija īpaši sarežģīta. Var izmantot kā automātisku instalēšanas metodi (spraudņus) un manuāli. Tomēr pēdējais variants joprojām ir vispiemērotākais, jo tas nelabvēlīgi neietekmē vietnes veiktspēju.

Varat izmantot vietnes augšdaļas poguHTML, lai samazinātu vietnes resursu patēriņu, jo liels paplašinājumu skaits var negatīvi ietekmēt resursa ātrumu. Viena pogas "uz augšu" pieslēgšana nevar būtiski ietekmēt vietnes lapu ielādes laiku, taču vairumā gadījumu lietotājam ir vismaz desmit spraudņi, kas instalēti CMS. Šādā gadījumā jebkurš spraudnis var nelabvēlīgi ietekmēt vietnes lapu veiktspēju.

Lasīt vairāk: