Funkcija kao što je gumb "gore" za web-lokaciju čini internetski resurs prikladnijim za svoje posjetitelje. Pomaže lako navigirati s bilo koje točke na vrhu stranice. To je jednostavno potrebno za internetske trgovine i web-lokacije s velikim člancima, koje zahtijevaju dugi klizač prema dolje.

Zašto je to potrebno

Trenutno, na većini web-mjesta, nema funkcije kao što je gumb "gore", i nema ništa loše u tome. No, njegova upotreba može donijeti mnoge prednosti i online resursu i njegovim posjetiteljima.

Prednosti za posjetitelje

Često, kada je stranica s internetskim resursima jako opterećena informacijama kada članak o informacijama zauzima puno prostora i potrebno je pomicati stranicu prema dolje pomoću kotačića miša. Osim toga, na kraju članka može biti puno komentara na nju. Kada posjetitelj pročita članak, teško je pomicati se po stranici, ali kada tekst završi i morate se pomaknuti gore, počinje se malo umoriti. Većina ljudi će jednostavno lijeno nositi dugačak svitak i jednostavno će zatvoriti mjesto, umjesto da i dalje šetaju njegovim prostorom. Korištenje gumba za trenutačno pomicanje na vrh stranice čini trošenje vremena na web-lokaciji praktičnijim.

Prednosti online resursa

Pozitivne strane za sami izvor temelje se na prošlim čimbenicima, jer pojednostavljeno kretanje na mjestu poboljšava bihevioralne čimbenike, budući da sviposjetitelji će biti aktivniji u svojim aktivnostima i prebacit će se na druge stranice.


Dakle, navedeni čimbenici u ponašanju utječu na odnos svih tražilica prema mjestu i dovode do poboljšanja u mjestu izvršenja pretraživanja.

Kako napraviti gumb "gore" na samom mjestu

Idemo dalje. Gumb za pomicanje prema gore za stranicu na bilo koji CMS uvijek se može obaviti samostalno, poduzimajući samo nekoliko vrlo jednostavnih koraka:

kreiranje slike;

stvaranje scenarija;

stvaranje stila gumba;

dodavanje na mjesto.

Slika gumba

Da biste dodali gumb "gore" na web-lokaciji, najprije morate napraviti ikonu kada kliknete na koju stranicu korisnik radi. Za to možete koristiti gotove varijante, među kojima uvijek možete odabrati najprikladnije. Da biste poboljšali izgled gumba, morate napraviti neka poboljšanja, naime napraviti sprite, koji omogućuje CSS-u da kombinira pozadinske slike, stvarajući tako animaciju od njih. Za grafičke radove možete koristiti bilo koji editor. No, najprikladnija opcija je online usluga PIXLR, budući da preuzimanje nije potrebno i možete ih koristiti izravno u pregledniku. Da biste započeli s radom u prozoru za uređivanje, morate odabrati polje "Pošalji sliku s računala". Primjerice, uzmite snimku rakete. Ako je veličina odabrane ikone prevelika, trebate napraviti malu prilagodbu veličine. Da biste to učinili, idite na gornji izbornik i odaberite u polju "Uredi", a zatim«Slobodna transformacija» Zatim, zajedno sa slikom postoje posebni markeri, premjestiti ih, možete promijeniti veličinu slike. Da biste spremili proporcije, možete koristiti tipku Shift, pritiskom na gumb za pomicanje plavih oznaka. Na kraju tih radnji pojavljuje se slika projektila.
Sljedeći korak je stvaranje kopije sloja. Sada morate malo pomaknuti sliku rakete iz novog sloja. Da biste to učinili, zgodno je koristiti alat za pomicanje koji se nalazi u drugom stupcu lijevog izbornika i strelicu prema gore na tipkovnici. Sada trebate napraviti gornju sliku crno-bijelu. To možete učiniti pomoću stavke "Ispravak" - "Tone /Saturation" u gornjem izborniku. Za potpunu promjenu boje, klizač "zasićenje" treba prihvatiti vrijednost -100. To će vam omogućiti da učinite efekt u kojem će se gumb "Gore" pretvoriti iz crne u bijelu u boju kada se kreće iznad nje. Posljednji dodir je uklanjanje nepotrebnog prostora oko dvije slike. Da biste to učinili, u lijevom izborniku odaberite stavku "Obrezivanje" i odaberite samo dvije rakete u pravokutniku. Da biste izvršili obrezivanje, pritisnite tipku Enter. Pojavila se slika u kojoj nema pretjeranog slobodnog prostora. Morate upisati vrijednost širine i visine rezultirajuće slike, jer će ti podaci biti korisni u sljedećem koraku. Da biste spremili, morate kliknuti na "File" - "Save", gdje u lijevom "My Computer" bilježi ime slike (samo engleski izgled), odaberite format (u ovom slučaju - PNG) i pritisnite gumb " Da.

Datoteka sa skriptomgumbi "gore"

Pisanje skripte u ovom slučaju nije potrebno. Možete koristiti javnu opciju, unoseći neke ispravke u gotov kod. Da biste to učinili, preuzmite uređivač koda. Najpopularnija, a uz to i besplatna verzija je Notepad ++. Jednom instaliran, morate kopirati i zalijepiti cijeli kod u njega:



Zatim kliknite na "Datoteka" - "Spremi kao" u gornjem izborniku, a zatim spremite kôd u .js formatu. Ovaj kôd možete upotrijebiti na svojoj web-lokaciji tako da prenesete datoteke slikovnih datoteka pomoću FTP veze.

Instalacija na web-lokaciji

Da biste postavili gumb za pomicanje gore za web-lokaciju, morate postaviti kôd na pravo mjesto. Morate ga unijeti prije oznake.

Stvaranje stila tipki u CSS-u

Često se gumb "gore" za stranicu nalazi na dnu ("podrum"). Datoteka style.css web-mjesta je potrebna za unos sljedećeg koda:

"/* gumb gore * /. ScrollTop {
background: url ('images /up.png') 0 0 nema ponavljanja; /* put slike * /
širina: 39px; /* širina gumba * /
visina: 96px; /* 50% visina gumba * /
dno: 5px; /* na fiksnom uvučenom položaju od dna * /39) lijevo: 89%; /* pomak ulijevo * /
}
.scrollTop: lebdeći {background-position: 0 -108px;} /* background shift * /"


U tom slučaju trebat će vam podaci o širini i visini slike. Sve što trebate učiniti jest unijeti primljene podatke u kod, a gumb "gore" za web-lokaciju će biti spreman! Što još?

Gumb "Up" za Wordpress web-lokaciju

Za ovaj CMS, gumb "Gore" može se izvršiti pomoću dodataka, kao i pomoću vas samih.Metoda dodatka je najpogodnija i najjednostavnija za instaliranje, jer zahtijeva samo da kliknete na gumb za instalaciju i konfigurirate cijelu funkcionalnost u izborniku dodataka. Prije nego što odaberete potonji treba biti oprezan, jer s njim će biti moguće lako kupiti virus na mjestu. Najpopularnija i dokazana opcija je dodatak koji se zove Scroll Back To Top. Možete ga preuzeti pomoću standardnog Wordpress plugin pretraživanja. Ovo proširenje ima višestruku funkcionalnost i bit će vrlo lako individualizirati gumb "gore" za stranicu na Wordpressu. Nije potrebno mijenjati sve vrijednosti, samo trebate konfigurirati vrstu i mjesto gumba na stranici web-lokacije. Kao što možete vidjeti, instaliranje gumba "gore" s dodatcima je vrlo jednostavno. No, postoji jedna važna nijansa koja je da svaki instalirani plugin učitava CMS. To može utjecati na izvedbu online resursa. Zbog toga većina vlasnika web-lokacija nastoji provesti sve promjene izravno u kodu, a ne pomoću proširenja trećih strana. Možete napraviti gumb "gore" za web-lokaciju u HTML-u, što smanjuje potrošene resurse. Prije nego što promijenite sve datoteke sustava Wordpress, provjerite jesu li napravljene sigurnosne kopije. Zatim možete upravljati svim koracima za stvaranje vlastitog gumba, opisanog gore.

Knop "up" za Joomlu

CMS Joomla također podržava instaliranje dodataka, kao što je Wordpress. Najuspješnija verzija gumba "gore" za stranicu na Joomli 3 je proširenje koje se zove Vrh stranice. U ovom CMS-u, bilo koji dodatak može se instalirati putem "Upravitelja"Proširenja. " Da biste to učinili, trebate:

preuzeti dodatak na internetu;

Kliknite gumb Pregledaj u Upravitelju proširenja;

odaberite preuzetu arhivu;

Kliknite "Preuzmi" i instalirajte.

Sada trebate aktivirati u "Upravitelju dodataka". Da biste to učinili, morate otići u ovaj odjeljak, pronaći dodatak i prebaciti njegovo stanje na "uključeno". Slijedi konfiguracija svih opcija proširenja pomoću istog odjeljka gdje trebate pronaći "Osnovne postavke" ovog dodatka na desnoj strani. Vrh stranice ima sljedeće funkcionalnosti:

Run in /administrator - Omogućite tu opciju ne samo na internetskom resursu, već iu samoj Joomla CMS ploči.

Položaj otkrivanja gumba - koliko piksela treba vratiti korisnik kako bi se pojavio gumb "gore".

Tekst gumba za izostavljanje - Prisutnost teksta na gumbu.

Uvijek na vrhu - stranica web-lokacije uvijek će se prikazivati ​​od početka. Kada koristite sidra, ne morate aktivirati ovu opciju za pomicanje na određeno mjesto na stranici.

Smooth Scroll - glatko pomicanje stranice.

Trajanje pomicanja - vrijeme kroz koje se stranica pomiče do vrha.

Scroll Transition - pomicanje do velikih vizualnih efekata.

Transition Easing - "slabljenje" premještanja na vrh stranice.

Lokacija veze - položaj ikone. Prema zadanim postavkama, gumb se nalazi u donjem desnom kutu.

Koristi stilove je stil pojedinačnog gumba koji se može postaviti u okvir ispod. Ako se prebaci na negativnu vrijednost, tada će se uzeti svi stiloviaktivna tema stranice.

Stil veze je polje za upisivanje postavki stila gumba.

Da biste samostalno konfigurirali stil gumba "gore", morate imati barem minimalno CCS znanje. U suprotnom, potrebno je prebaciti vrijednost zadnjeg parametra na "Ne". Još jedna važna nijansa je da uobičajeni natpis na ikoni sadrži engleski tekst: Povratak na vrh. U ruskom jeziku stranice, takav tekst ne može biti, pa samo ga isključite u plugin postavke ili ga promijeniti na ruski. Da biste promijenili ovaj umetak, morate se prijaviti na poslužitelj web-lokacije pomoću ugrađenog FTP-a ili hostinga upravitelja datoteka. Zatim, direktorij "/administrator /language /en-GB /" mora pronaći datoteku pod nazivom "en-GB.plg_system_topofthepage.ini". Prije promjene teksta, morate promijeniti kodiranje ovog dokumenta u UTF-8. To će omogućiti normalan prikaz ruskih slova. Zatim smo pronašli sljedeći redak:

"PLG_SYS_TOPOFTHEPAGE_GOTOTOP =" Povratak na vrh ""

i ​​promijenite izraz u navodnicima na ruskom. Možete koristiti izraze kao što su "Gore!", "Početak!" Ili "Gore!". Na kraju, trebate spremiti izmijenjenu datoteku i provjeriti prisutnost gumba "gore" za stranicu na Joomli.

Gumb "Up" za Ucoz

Gumbi "gore" za web-lokaciju na Ucoz-u morat će se izvršiti pomoću implementacije koda, budući da nije moguće povezati dodatke za ovaj CMS. Međutim, da biste to učinili, ne morate dugo ispitivati ​​datoteke sustava i tražiti potrebne redove, samo trebate umetnuti mali broj na pravo mjesto. Za instalaciju će nam trebati:

Idite na Upravljačku ploču - & gt;Prikaži - & gt; Upravljanje dizajnom (predlošci) - & gt; Donji dio područja;

umetnite skriptu (može se naći na službenim stranicama projekta i resursima treće strane).

Zaključak

Zatim se u donjem desnom kutu pojavljuje ikona koja pomiče korisnika na vrh stranice. Kao što možete vidjeti, instaliranje gumba "Gore" za bilo koji CMS nije osobito teško. Možete koristiti i automatsku instalacijsku metodu (plug-ins) i ručno. Međutim, posljednja opcija ostaje najprikladnija, budući da nema negativan utjecaj na rad stranice. Možete koristiti gumb "gore" za web-lokaciju u HTML-u kako biste maksimalno povećali potrošnju resursa web-lokacije, budući da velik broj proširenja može negativno utjecati na izvedbu resursa. Jedan dodatak ne može uvelike utjecati na vrijeme učitavanja stranica stranica, ali u većini slučajeva korisnik ima najmanje deset dodataka instaliranih na CMS-u. U tom slučaju, bilo koji dodatak može negativno utjecati na izvedbu stranica web-lokacije.