Gumb Up za stran: kako to storiti

Funkcija, kot je gumb "gor" za spletno mesto, omogoča, da je internetni vir bolj primeren za svoje obiskovalce. Pomaga preprosto krmarjenje s katere koli točke na vrhu strani. To je preprosto potrebno za spletne trgovine in spletna mesta z velikimi izdelki, ki zahtevajo dolg pomik navzdol.

Zakaj je potrebno

Trenutno, na večini spletnih mest, ni funkcije, kot je gumb "gor" in s tem ni nič narobe. Vendar lahko njegova uporaba prinese številne koristi tako spletnemu viru kot njegovim obiskovalcem.


Koristi za obiskovalce

Pogosto, ko je spletna stran z internetnimi viri močno obremenjena z informacijami, ko informacijski članek zavzame veliko prostora in se mora pomikati po strani navzdol s kolescem miške. Poleg tega, na koncu članka lahko veliko pripomb na njo. Ko obiskovalec prebere članek, je težko pomakniti se po strani, vendar ko se besedilo konča in se morate premakniti navzgor, se začne malo utrujati. Večina ljudi bo preprosto leno nosila dolg pomik, in preprosto bodo zaprli spletno stran, namesto da bi še vedno hodili po njenih prostorih. Uporaba gumba za takojšen premik na vrh strani omogoča bolj udobno porabo časa na spletnem mestu.

Koristi spletnega vira

Pozitivne strani samega vira temeljijo na preteklih dejavnikih, saj poenostavljeno gibanje na mestu izboljša vedenjske dejavnike, saj vsiobiskovalci bodo bolj aktivni v svojih dejanjih in bodo prešli na druge strani.


Tako dani vedenjski dejavniki vplivajo na razmerje med vsemi iskalniki na spletno stran in vodijo k izboljšanju v kraju izvajanja iskanja.

Kako narediti gumb "navzgor" na samem mestu

Pojdimo še dlje. Gumb za pomikanje navzgor za spletno mesto na kateri koli CMS lahko vedno naredite sam, tako da naredite le nekaj preprostih korakov:
  • ustvarjanje slike;
  • ustvarjanje skript;
  • ustvarjanje sloga gumba;
  • dodajanje na območje.
  • Slika gumba

    Za dodajanje gumba »navzgor« na spletnem mestu, morate najprej sami ustvariti ikono, ko kliknete na stran, na kateri je uporabnik. Za to lahko uporabite že pripravljene različice, med katerimi lahko vedno izberete najprimernejše. Da bi izboljšali videz gumba, morate narediti nekaj izboljšav, in sicer narediti sprite, ki omogoča, da CSS združi slike ozadja in s tem ustvari animacijo iz njih. Za grafična dela lahko uporabite kateri koli urejevalnik. Toda najbolj priročna možnost je spletna storitev PIXLR, saj ni potrebno ničesar prenesti in jih lahko uporabite neposredno v brskalniku. Če želite začeti delati v oknu urejevalnika, morate izbrati polje »Naloži sliko iz računalnika«. Kot primer vzemite izstrelitveno sliko.
    Če je velikost izbrane ikone prevelika, morate prilagoditi velikost. Če želite to narediti, pojdite v zgornji meni in izberite polje "Uredi" in nato«Prosta transformacija» Naslednja, skupaj s sliko so posebni označevalci, ki jih premikajo, lahko spremenite velikost slike. Če želite shraniti razmerja, lahko uporabite tipko Shift in pritisnete gumb, da premaknete modre oznake. Na koncu teh dejanj se pojavi slika izstrelkov.
    Naslednji korak je ustvariti kopijo plasti. Zdaj morate raketno sliko iz nove plasti premakniti nekoliko navzgor. Za to je priročno uporabiti orodje za premikanje, ki se nahaja v drugem stolpcu levega menija in puščico navzgor na tipkovnici. Zdaj morate narediti zgornjo sliko črno-belo. To lahko storite s točko "Popravek" - "Tone /Saturation" v zgornjem meniju. Za popolno spremembo barve mora drsnik "Saturation" sprejeti vrednost -100. To vam bo omogočilo, da naredite učinek, pri katerem se bo gumb "Up" pretvoril iz črno-belega v barvo pri lebdenju nad njim. Zadnji dotik je odstranitev nepotrebnega prostora okoli dveh slik. To naredite tako, da v levem meniju izberete element "Obrezovanje" in v pravokotniku izberete samo dve raketi. Za izvajanje obrezovanja se pritisne tipka Enter. Pojavila se je slika, v kateri ni pretiranega prostora. Zapisati morate vrednost širine in višine dobljene slike, saj bodo ti podatki koristni v naslednjem koraku.
    Če želite shraniti, morate klikniti na "File" - "Save", kjer v levem "My Computer" zapišete ime slike (samo angleška postavitev), izberite format (v tem primeru - PNG) in pritisnite gumb Da.

    Datoteka s skriptomgumbi "gor"

    Pisanje scenarija v tem primeru ni potrebno. Uporabite lahko javno izbiro in vnesete nekaj popravkov v končno kodo. To storite tako, da prenesete urejevalnik kod. Najbolj priljubljena in poleg brezplačne različice je Notepad ++. Ko je nameščen, morate kopirati in prilepiti celotno kodo:



    Nato kliknite "File" - "Save As" v zgornjem meniju in shranite kodo v .js format. Potem lahko to kodo uporabite na svojem spletnem mestu tako, da v datoteko FTP prenesete datoteke slikovnih datotek.

    Namestitev na spletnem mestu

    Za nastavitev gumba za pomikanje za spletno mesto morate kodo postaviti na pravo mesto. Vnesti ga morate pred oznako.

    Ustvarjanje sloga gumbov v CSS-ju

    Pogosto se gumb "gor" za spletno mesto nahaja na dnu ("kletna"). Datoteka style.css spletne strani je potrebna za vnos naslednje kode:

    "/* gumb gor * /. ScrollTop {
    ozadje: url ('images /up.png') 0 0 brez ponovitve pot slike * /
    širina: 39px; /* širina gumba * /
    višina: 96px; /* 50% višina gumba * /
    spodaj: 5px; 39) levo: 89%; /* premik v levo * /
    }
    .scrollTop: hover {ozadje-položaj: 0 -108px;} /* sprememba ozadja * /"


    V tem primeru boste potrebovali podatke o širini in višini slike. Vse kar morate storiti je, da vnesete prejete podatke v kodo in gumb "gor" za stran bo pripravljen! Kaj še?

    Gumb "Up" za spletno mesto Wordpress

    Za ta CMS se gumb "Up" lahko izvede s pomočjo vtičnikov in tudi sami.Način vtičnika je najbolj priročen in enostaven za namestitev, saj zahteva le, da kliknete gumb za namestitev in konfigurirate celotno funkcionalnost v meniju vtičnikov. Preden izberete slednje, morate biti previdni, saj bo z njim mogoče enostavno kupiti virus na spletnem mestu. Najbolj priljubljena in dokazana možnost je vtičnik Scroll Back To Top. Lahko ga prenesete s standardnim iskalnikom Wordpress plugin. Ta razširitev ima več funkcionalnosti in zelo enostavno bo individualizirala gumb "gor" za spletno mesto na Wordpress-u. Ni potrebno spreminjati vseh vrednosti, konfigurirati morate samo vrsto in lokacijo gumba na strani spletnega mesta. Kot lahko vidite, je nameščanje gumba "navzgor" z vtičniki zelo preprosto. Obstaja pa en pomemben odtenek, da vsak nameščeni vtičnik naloži CMS. To lahko vpliva na uspešnost spletnega vira. Zato večina lastnikov spletnih mest poskuša vse spremembe uveljaviti neposredno v kodi, namesto z uporabo razširitev tretjih oseb. Lahko naredite gumb "gor" za spletno mesto v HTML-ju, kar zmanjša porabljene vire. Preden spremenite vse datoteke sistema Wordpress, se prepričajte, da so varnostno kopirane. Nato lahko upravljate vse korake za ustvarjanje lastnega gumba, opisanega zgoraj.

    Knop "up" za Joomla

    CMS Joomla podpira tudi namestitev pluginov, kot je Wordpress. Najuspešnejša različica gumba "gor" za spletno mesto na Joomli 3 je razširitev, imenovana Vrh strani. V tem CMS-u lahko kateri koli vtičnik namestite prek upraviteljaRazširitve. " To storite tako, da:
  • prenesete vtičnik na internet;
  • Kliknite gumb Prebrskaj v Upravljalniku razširitev;
  • izberite preneseni arhiv;
  • Kliknite »Prenesi« in namestite.
  • Zdaj morate aktivirati v "Upravljalniku čepov". Če želite to narediti, morate iti v ta razdelek, poiskati vtičnik in preklopiti njegovo stanje na »vklopljeno«. Sledi konfiguracija vseh možnosti razširitev z istim odsekom, kjer morate na desni strani najti "Osnovne nastavitve" tega vtičnika. Na vrh strani so naslednje funkcije:
  • Zaženi v /administrator - Omogoči to možnost ne samo na spletnem viru, temveč tudi na samem panelu Joomla CMS.
  • Gumb Razkrij položaj - koliko pikslov mora uporabnik vrniti, da se prikaže gumb "gor".
  • Besedilo gumba Izpusti - Prisotnost besedila na gumbu.
  • Vedno na vrhu - stran spletnega mesta bo vedno prikazana od začetka. Ko uporabljate sidra, vam ni treba aktivirati te možnosti, da se pomaknete na določeno mesto na strani.
  • Smooth Scroll - omogoča, da se stran premakne bolj gladko.
  • Trajanje drsenja - čas, ko se stran popolnoma premakne na vrh.
  • Scroll Transition - pomikanje do velikih vizualnih učinkov.
  • Transition Easing - "oslabitev", ki se premika na vrh strani.
  • Lokacija povezave - lokacija ikone. Privzeto je gumb v spodnjem desnem kotu.
  • Uporaba slogov je slog posameznega gumba, ki ga lahko nastavite v spodnjem polju. Če se preklopi na negativno vrednost, bodo vzete vse slogovne slogeaktivna tema spletnega mesta.
  • Slog povezave je polje za vnašanje nastavitev slogov gumbov.
  • Za samostojno konfiguriranje sloga gumba "navzgor" morate imeti vsaj minimalno znanje CCS. V nasprotnem primeru je potrebno vrednost zadnjega parametra spremeniti v "ne". Še en pomemben odtenek je, da običajni napis na ikoni vsebuje angleško besedilo: Nazaj na vrh. V rusko-jezikovni strani, tako besedilo ne more biti, zato ga samo izklopite v nastavitvah vtičnika ali pa ga spremenite v rusko. Če želite spremeniti ta vložek, se morate prijaviti v strežnik spletnega mesta z vgrajenim FTP-jem ali gostiteljem datotek. Nato mora imenik "/administrator /language /en-GB /" najti datoteko "en-GB.plg_system_topofthepage.ini". Preden spremenite besedilo, morate spremeniti kodiranje tega dokumenta v UTF-8. To bo omogočilo normalno prikazovanje ruskih črk. Nato najdemo naslednjo vrstico:

    "PLG_SYS_TOPOFTHEPAGE_GOTOTOP =" Vrni se na vrh ""

    in spremeni frazo v narekovajih v ruskem jeziku. Uporabite lahko fraze, kot so "Up!", "Begin!" Ali "Up!". Na koncu morate shraniti spremenjeno datoteko in preveriti prisotnost gumba »gor« za spletno mesto na Joomli.

    Gumb "Up" za Ucoz

    Gumbi "up" za spletno mesto na Ucozu bo treba opraviti s pomočjo implementacije kode, saj za ta CMS ni mogoče povezati vtičnikov. Vendar pa za to, vam ni treba dolgo preučiti sistemske datoteke in poiščite potrebne vrstice, morate le vstaviti majhno kodo na pravem mestu. Za namestitev potrebujemo:
  • Pojdite na nadzorno ploščo - & gt;Prikaži - & gt; Upravljanje oblikovanja (predloge) - & gt; Spodnji del lokacije;
  • vstavite scenarij (najdete ga na uradni strani projekta in viri tretjih oseb).
  • Zaključek

    V spodnjem desnem kotu se prikaže ikona, ki uporabnika premakne na vrh strani. Kot lahko vidite, namestitev gumba "Up" za kateri koli CMS ni bilo posebej težko. Uporabite lahko tako avtomatizirano metodo namestitve (plug-ins) kot ročno. Toda zadnja možnost ostaja najprimernejša, saj nima negativnega vpliva na uspešnost lokacije. Z gumbom "gor" za spletno mesto v HTML-ju lahko čim bolj povečate porabo virov spletnega mesta, saj lahko veliko število razširitev negativno vpliva na zmogljivost vira. Eni vtičnik z gumbom gor ne more bistveno vplivati ​​na čas nalaganja strani spletnega mesta, v večini primerov pa ima uporabnik v CMS nameščenih vsaj deset vtičnikov. V tem primeru lahko katerikoli vtičnik negativno vpliva na učinkovitost strani spletnega mesta.

    Sorodne publikacije