"Gore" gumb za web mjesto: kako to učiniti

Internet

Ova funkcija, poput gumba "gore" za web mjesto,Internet resurs čini Internet prikladnijim za svoje posjetitelje. Pomaže pri lakšem kretanju s bilo kojeg mjesta na stranici. Ovo je neophodno samo za mrežne trgovine i web-lokacije s velikim člancima koji zahtijevaju dulje pomicanje prema dolje.

Zašto je to?

U ovom trenutku na većini web mjesta kao što sufunkcije, poput gumba "gore", ne, i nema ništa kritično za ovo. No, njegova upotreba može donijeti mnogo dodataka i za resurse interneta i za svoje posjetitelje.

Prednosti za posjetitelje

Često se događa kada je stranica internetskih resursateško učitava s količinom informacija, kada je informacija članak uzima puno prostora i moraju pomaknuti da koristite kotačić miša. Plus toga, na kraju članka može predstavljati mnogo primjedbi na njega.

Kada posjetitelj čita članak, ništadosadan u pomicanju prema dolje nije, ali kad tekst završi i potrebno je krenuti prema gore, počinje se umoriti malo. Većina ljudi jednostavno će biti previše lijen da vodi dugi svitak, a oni će samo zatvoriti mjesto, umjesto da još uvijek šetnje kroz njegove prostranstva.

Pomoću gumba da biste se odmah prebacili na vrh stranice učinili su vam zabavu na web sučelju.

Prednosti za resurse interneta

gumb za web mjesto

Dolaze pozitivne strane za sam izvorod prošlih čimbenika, jer pojednostavljeni kretanje na web mjestu poboljšava čimbenike ponašanja, budući da će svi posjetitelji biti aktivniji u svojim akcijama i premjestiti na druge stranice.

Stoga, ovi čimbenici ponašanja utječu na stav svih tražilica na web lokaciju i dovode do poboljšanja lokacije rezultata pretraživanja.

Kako napraviti gumb "gore" na mjestu sami

gumb za html stranicu

Razumijemo dalje. Gumb za pomicanje stranice za bilo koji od CMS-a uvijek se može obaviti sami, samo nekoliko jednostavnih koraka:

  • stvaranje slike;
  • Izrada skripte;
  • stvaranje stila tipki;
  • dodavanje na web mjesto.

Slika gumba

Za dodavanje gumba "gore" na web mjestu, zamorat ćete napraviti ikonu, kada kliknete, korisnik će se pomaknuti prema gore. Da biste to učinili, možete koristiti gotove opcije, među kojima uvijek možete odabrati najprikladnije.

Da biste poboljšali izgled gumba, trebate izvršiti određena poboljšanja, naime, izraditi sprite koji vam omogućuje kombiniranje pozadinskih slika na temelju CSS-a i time stvaranje animacije od njih.

Za grafičke radove možete koristiti bilo koji urednik. No, najprikladnija će opcija biti online usluga PIXLR, jer ovdje ne morate ništa preuzeti i možete ga koristiti izravno u pregledniku.

Da biste počeli raditi u prozoru za uređivanje koji će se prikazati, odaberite polje "Upload image from computer". Kao primjer, uzmite sliku rakete.

kako napraviti gumb na mjestu

Ako je veličina odabrane ikone prevelika, tada pritisnitemorat ćete napraviti malu prilagodbu veličini. Da biste to učinili, idite na gornji izbornik i odaberite polje "Uredi", a potom "Besplatna pretvorba ..."

Sljedeća pored slike su posebanoznake, pomicanjem koje možete promijeniti veličinu slike. Da biste spremili razmjere, možete koristiti tipku Shift pritiskom, morate premjestiti plave markere. Na kraju ovih akcija dobiva se slika rakete.

Sljedeći je korak stvaranje kopije sloja.

Sada morate premjestiti raketnu slikunovi sloj malo gore. Da biste to učinili, praktično je koristiti alat za premještanje koji se nalazi u drugom stupcu lijevog izbornika i strelicu "gore" na tipkovnici.

Sada morate napraviti crnu i bijelu sliku. To se može učiniti pomoću "Correction" - "Hue / Saturation" stavke u gornjem izborniku. Za potpuno promjenu boje, klizač Zasićenost mora biti postavljen na -100. Ova akcija učinit će učinak da se gumb "Gore" pretvori s crno-bijelog u boju kada je lebdjeti.

Konačni dodir je uklanjanje dodatnog prostora.oko dvije slike. Da biste to učinili, odaberite stavku "Trim" s lijevog izbornika i odaberite samo dvije rakete u pravokutniku. Za izvođenje rezanja, pritisnite tipku Enter.

Ispalo je sliku u kojoj nema previše prostora. Morat ćete zabilježiti širinu i visinu rezultirajuće slike jer će ti podaci biti korisni u sljedećem koraku.

kako napraviti gumb na mjestu

Za spremanje trebate kliknuti na "File" -"Spremi", gdje se u lijevom dijelu "My Computer" upisuje naziv slike (samo engleski izgled), odaberite format (u ovom slučaju, PNG) i kliknite gumb "Da".

Datoteka sa skriptom gumba za gore

Pisanje skripte u ovom slučaju nije potrebno. Moguće je koristiti javno dostupnu opciju, izvršavajući neke ispravke gotovom kodu.

Da biste to učinili, morate preuzeti sve uređivače koda. Najpopularnija i besplatna opcija je Notepad ++. Nakon instalacije trebate kopirati i zalijepiti sve navedeni kôd:

<script type = "text / javascript"> $ (dokument).fadeIn ();} else {$ ("#" ({{($ { ({scrollTop: 0}, 400), povratak lažan;} (f) () () );}); </ script>

Dalje, kliknite na gornjem izborniku "File" - "Savekao ... ", nakon čega spremamo kôd u .js formatu. Nakon toga možete upotrijebiti ovaj kôd na svojoj web-lokaciji prenoseći skriptne datoteke i slike na njega pomoću FTP veze.

Instalacija na mjestu

Da biste postavili gumba za pomicanje gore za web mjesto, trebate postaviti kôd na željeno mjesto. Morate ga unijeti prije oznake </ body>.

Stvaranje stila gumba u CSS-u

Najčešće se gumb "gore" za web mjesto nalazi na dnu ("podrum").

Sljedeći kôd trebao bi biti unesen u stilu style.css stranice:

"/ * Gumb gore * /

.scrollTop {
pozadina: url ("images / up.png") 0 0 ne-ponavljanje; / * odgovarajući put do slike * /
širina: 39px; / * širina gumba * /
visina: 96px; / * 50% visine tipke * /
dno: 5px; / * na fiksnom položaju uvučeni dno * /
lijevo: 89%; / * pomak lijevo * /
}
.scrollTop: lebdjeti {pozadina: 0 -108px; } / * background offset * / "

U tom slučaju, i trebaju te širine podataka i visinu slike. Ostaje samo unijeti podatke u kod, a gumb "gore" za web mjesto će biti spreman! Što još?

Wordpress Gore gumb za Wordpress web stranicu

kako napraviti gumb na mjestu

Za ovaj CMS, gumb "Gore" možete napraviti pomoću dodataka, kao i samostalno.

Metoda s dodacima je najprikladnija i jednostavna za instalaciju, jer za to trebate samo kliknuti na gumb za instalaciju i konfigurirati sve funkcionalnosti u dodacnom izborniku.

Odabirom potonjeg bi trebao doći sbudite oprezni, jer s njim možete jednostavno kupiti virus na web mjestu. Najpopularnija i dokazana mogućnost je dodatak koji se zove Scroll Back To Top. Možete ga preuzeti standardnim pretraživanjem Wordpress dodataka.

Ovo proširenje ima višefunkcionalnost, a vrlo će lako individualizirati gumb "gore" za Wordpress web mjesto. Nije potrebno mijenjati sve vrijednosti, samo trebate konfigurirati izgled i mjesto gumba na stranici web mjesta.

Kao što možete vidjeti, postavljanje gumba za gore sadodataka je vrlo jednostavna. No, postoji jedna važna nijansa, koja se sastoji u činjenici da svaki instalirani dodatak učitava CMS. To može utjecati na brzinu internetskog resursa. Zato većina vlasnika web mjesta pokušava izvršiti sve izmjene izravno u kodu, a ne uz pomoć proširenja trećih strana. Možete postaviti gumb "gore" za web mjesto u HTML-u, što će minimizirati potrošene resurse.

Prije mijenjanja svih datoteka sustava Wordpress, morate ih sigurnosno kopirati. Zatim možete slijediti sve korake kako biste stvorili vlastiti gumb, opisan gore.

Kucajte se za Joomla

gore gumb za Joomla 3 mjestu

Joomla CMS također podržava instalaciju dodataka, baš kao Wordpress. Najuspješnija opcija za gumb gore za Joomla 3 web mjesto je proširenje zove Vrh stranice.

U ovom CMS-u bilo koji dodatak može se instalirati preko "Extension Manager". Da biste to učinili, trebate:

  • preuzeti dodatak na Internetu;
  • kliknite gumb "Pregledaj" u upravitelju za proširenje;
  • odaberite preuzetu arhivu;
  • Kliknite "Preuzmi" i instalirajte.

Sada ga morate aktivirati u "Upravitelju dodatka". Da biste to učinili, idite na ovaj odjeljak, pronađite dodatak i prebacite ga na "uključeno".

Zatim slijedi konfiguracija svih parametara ekspanzije pomoću istog odjeljka gdje trebate pronaći "Glavne parametre" ovog dodatka na desnoj strani.

Vrh stranice ima sljedeće funkcije:

  • Pokrenite / administrator - omogućite opciju ne samo na resursu Interneta, već i na samom CMS Joomla ploči.
  • Položaj otkrivanja gumba - koliko piksela korisnik mora napustiti da bi se pojavio gumb "gore".
  • Odustani od teksta gumba - prisutnost teksta na gumbu.
  • Uvijek na vrhu - stranica stranice će biti prikazana cijelo vrijeme od početka. Kada koristite sidra za pomicanje do određenog mjesta na stranici, ta se opcija ne mora aktivirati.
  • Glatko kretanje - čini stranicu pomicanjem glatko.
  • Trajanje promatranja - vrijeme nakon koje je stranica u potpunosti premještena na početak.
  • Pomicanje prijelaza - dodaje pomicanje za sjajne vizualne efekte.
  • Transition Easing - "olakšavanje" prijelaz na vrh stranice.
  • Lokacija veze - lokacija ikone. Po standardu, gumb se nalazi u donjem desnom kutu.
  • Upotreba stilova stil je pojedinačnih gumba koji se može postaviti u polju u nastavku. Ako se prebaci na negativnu vrijednost, svi parametri stila bit će preuzet iz aktivne teme web-lokacije.
  • Stil za povezivanje - polje za unos vlastitih parametara stila gumba.

Da biste samostalno prilagodili stil gumba "gore", morate imati najmanje minimalno znanje o CCS-u. U suprotnom vrijedi prebaciti vrijednost pretposljednjeg parametra na "Ne".

Još jedna važna nijansa je touobičajeni natpis na ikoni sadrži engleski tekst: Povratak na vrh. Na ruskom jeziku takav tekst ne može biti prisutan, stoga ga jednostavno trebate onemogućiti u postavkama dodataka ili ga prebaciti na ruski.

Da biste promijenili ovaj natpis, morate otićiposlužitelj koji koristi FTP ili upravitelj datoteka ugrađen u hosting. Zatim na popisu "/ administrator / language / en-GB /" morate pronaći datoteku pod nazivom "en-GB.plg_system_topofthepage.ini".

Prije mijenjanja teksta promijenite kodiranje ovog dokumenta na utf-8. To će učiniti normalan prikaz ruskih pisama.

Dalje, nalazimo sljedeću liniju:

"PLG_SYS_TOPOFTHEPAGE_GOTOTOP =" Povratak na vrh ""

i promijenite izraz u navodnicima ruskom. Možete upotrijebiti izraze kao što su "Top!", "Top!" Ili "Top!".

Na kraju, morat ćete spremiti modificiranu datoteku i provjeriti prisutnost gumba za gore za Joomla web mjesto.

Gumb Ucoz gore

pomaknite gore gumb za web mjesto

Morat ćete napraviti gumb gore za mjesto Ucozkoristeći injekciju koda, jer se dodatke ne mogu povezati s ovim CMS-om. Međutim, nije potrebno mnogo vremena za proučavanje datoteka sustava i traženje potrebnih redaka, samo trebate umetnuti mali broj na pravo mjesto.

Za instalaciju će nam trebati:

  • idite na "Upravljačka ploča -> Dizajn -> Upravljanje projektima (predlošci) -> Dno stranice;
  • umetnite skriptu (možete pronaći na službenim stranicama projekta i resursima treće strane).

zaključak

Nakon toga će se u donjem desnom kutu pojaviti ikona, pomicanje korisnika do samog vrha stranice.

Kao što možete vidjeti, instalacija gumba "Gore" zabilo koji od CMS-a nije bio osobito težak. Može se koristiti kao automatska metoda instalacije (dodatke) i priručnik. Međutim, ova posljednja opcija ostaje najprikladnija jer ne utječe negativno na izvedbu web mjesta.

Možete upotrijebiti gumba za gore za web mjesto naHTML kako bi se smanjila potrošnja resursa web lokacije, jer veliki broj proširenja može imati negativan utjecaj na brzinu resursa. Jedan dodatak gumba "gore" neće moći znatno utjecati na vrijeme učitavanja stranica web mjesta, ali u većini slučajeva korisnik ima najmanje deset dodataka instaliranih na CMS. U tom slučaju bilo koji dodatni modul može negativno utjecati na izvedbu stranica na web-lokaciji.