De ce avem nevoie de acest buton și când este cel mai bine să utilizați
Când pe pagina a site-ului sunt un număr mare de conținut utilizator familiarizat cu el și pagina irosite la un anumit punct sau la partea de jos, începe de multe ori pentru a defila în partea de sus pentru a vedea link-urile de navigare din partea de sus a paginii și \ sau pentru a efectua anumite acțiuni.
Există un mod foarte simplu de a oferi utilizatorului o funcțională. Această metodă nu necesită implicarea unor biblioteci sau scripturi suplimentare și a făcut exclusiv cu HTML și, dacă se dorește, cu activarea CSS, prin crearea unei legături interne comune.
Pentru a face acest lucru, oriunde, în partea de jos a paginii, pur și simplu adăugați următorul cod:
După cum puteți vedea link-ul dat de clasă .topbutton folosind care, cu ajutorul CSS, puteți face orice link, aspectul dorit, de exemplu, vizualiza același buton.
CSS Exemplu de cod:
- Defilare nu va fi netedă, iar după apăsarea utilizatorul va fi redirecționat imediat la partea de sus a paginii.
Avantajele acestui tip de buton:
+ Pentru a opera butoanele nu trebuie să utilizați script-uri și mari, în volum, a bibliotecii. Și acest lucru este un plus foarte mare.
2. Butonul din partea de sus cu jQuery
Butonul pur și simplu puse în aplicare. Pentru funcționarea acestuia va avea nevoie de jQuery bibliotecă, un mic script care conține evenimente jQuery, anumite stiluri și tag-ul DIV care conține textul și ID-ul necesar.
Butonul funcționează în browsere, deoarece versiuni de Firefox 3.0.10 - 3.6.13, Internet Explorer 7 și 8, Google Chrome, Jquery 1.4.3. Din păcate, butonul nu funcționează în IE 6, dar ai nevoie de ea :)?
următorul cod trebuie să introduceți înaintea etichetei pe toate paginile site-ului. În cazul în care biblioteca jQuery este deja conectat la site-ul dvs., nu este necesar să adăugați prima linie.
Pentru a da un aspect frumos buton, trebuie să adăugați următoarele stiluri. cele mai bune lor pentru a adăuga la fișierul de stil site.
3. UItoTop JQuery plug-in
Plugin simplă de luare butoane aspect neted și Defilare lină atunci când face clic pe acesta. Pentru a utiliza plugin-ul de pe site-ul dvs. nu este nevoie să adăugați orice sau etichete în markup HTML a paginii. Suficient pentru a conecta toate fișierele necesare plug-in, și va funcționa.
Extras arhiva descărcat cu sursa în care un dosar de pe site. Pentru a activa plugin-ul, este suficient pentru a conecta trei dintre fișierele existente js. Pentru a le activa, înainte de închidere
adăugați următoarea cale de fișier:
Modul în care duce la fișierele corecte, în conformitate cu directorul în care fișierele sunt situate plug-in.
Vă rugăm să rețineți că, dacă v-ați conectat anterior la site-ul dvs. jQuery bibliotecă, apoi adăugați următorul cod nu este necesar:
Următorul pas este de a adăuga stiluri CSS, fără buton nu funcționează. le conecta în două moduri.
Prima metodă este de a adăuga toate paginile site-ului dvs., între etichetele
o referință la fișierul de stil CSS:
Nu uitați să schimbați calea către fișierul.
A doua metodă este de a copia întregul conținut al fișierului ui.totop.css și lipiți-l în stiluri de fișier CSS ale site-ului. A doua metodă este mai rațională, deoarece nu necesită fișiere de conectare suplimentare.
4. Butoanele derulați în sus și în jos pe JQUERY
Arhiva de descărcare va conține toate fișierele necesare pentru butoanele de operare. Acest CSS, JS fișiere și imagini pe care le-am găsit trăgătorul.
Mai întâi trebuie să plasați butoanele de cod HTML de apel pe toate paginile. Pentru a face acest lucru, plasați textul în aval imediat înainte de eticheta .
Calea care duce la fișierul JS trebuie să fie înlocuit cu propria valoare.
În prima linie de cod se conectează biblioteca JQuery, așa că, dacă aveți anterior a fost conectat la site-ul dvs., acesta trebuie să fie eliminate.
Următoarele este conectarea unui alt fișier JS și codul conține caracteristici specifice care trebuie să fie luate în considerare mai detaliat. Pentru că despre ajutorul pe care îl pot modifica unii parametri ai butoanelor. Aici este codul cu o explicație:
Pentru a adăuga CSS doar se conectează la fișierul site-ului paginile style.css în arhiva cu sursa:
Dar cea mai bună opțiune ar fi pentru a copia stilurile fișierului și inserați-le într-un stil de fișier de pe site.
5. Butonul Defilare lină folosind JQuery
O altă variantă a conținutului paginii de defilare organizare buna de jos in sus, folosind JQuery. Butonul este situat în partea din dreapta jos a paginii, și apare doar în cazul în care un pic proskrolit jos a paginii. Toate puse în aplicare cu ajutorul unei piese mici de CSS și codul JS, precum și o imagine mică este folosită ca un buton.
Îmi place acest buton, astfel încât să nu necesită crearea unui număr mare de script-uri, în același timp, are efecte bune.
Acum ne uităm la ceea ce trebuie făcut pentru a conecta butonul de la site-ul
Veți avea nevoie de o imagine a butonului în sine poate lua orice, și se poate folosi aici: icon_top.png
Pentru butonul de apel după conținutul principal al paginii, sau înaintea etichetei plasați următorul cod HTML:
Cu acest cod, cu excepția aspectului, vom defini poziția butonului și liniuța 100 px la dreapta și de jos 50 px. Cel mai bine este de a adăuga un fișier la stiluri site-ului.
Pentru a începe, conectați biblioteca, în cazul în care nu este conectat la site-ul tau. Pentru a face acest lucru, etichetele
. ? se introduce următorul text:
Apoi, imediat după biblioteca de conectare, trebuie să găsiți codul de mai jos JQuery:
În primul rând scrollTop - determină poziția curentă a barei de defilare verticală și dacă acesta este mai mare de 100 px, apare în mod automat butonul. Dacă doriți să apară mai devreme sau mai târziu se schimbe în valoare direcția dorită.
După cum puteți vedea, există două opțiuni - 0 - înseamnă că pagina este defilat până la începutul pixelului la zero și 600 - este viteza animației în milisecunde.
6. animate butonul de tranziție în sus
Când derulați pagini pe un anumit număr de simboluri în jos la colțul din stânga jos există un buton mare cu o săgeată. Când butonul cursorul mouse-ului se aprinde ușor, iar atunci când faceți clic defilare lină are loc în sus.
Pentru a crea un buton folosind imaginea de săgeată, stiluri CSS si jQuery.
Butoanele de imagine săgeată sunt utilizate pot fi găsite aici: sus-arrow.png
Pentru a butonului de apel, utilizați următorul cod HTML:
Dar aceasta trebuie să fie plasate direct în fața conținutului principal al paginii, în cazul în care ați pus-o înainte de eticheta de închidere , butonul nu va funcționa.
Și un alt punct important despre codul HTML. etichetă
trebuie să alocați un identificator de top.
Dacă eticheta
deja atribuite unui anumit cod, apoi butoanele codul de apel situate chiar deasupra, care urmează să fie înlocuit cu #top dvs. # id-
Folosind margini CSS definite și butoane de aspect, a adăugat proprietăți de tranziție: pentru a crea un efect de întârziere planare. Încorporați mai bine în fișierul CSS a site-ului.
Prima linie este o conexiune JQuery bibliotecă, dacă o aveți deja conectat, nu se adaugă această linie. Se adaugă restul codului între etichetele
.
Puteți modifica următoarele opțiuni după cum este necesar:
100 - este numărul de pixeli, după care apare butonul de derulare;
0 - acest lucru înseamnă că defilare se va face la zero pixeli adică, până la partea de sus ...
800 - aceasta este viteza de derulare în milisecunde.
7. Butonul translucidă folosind JQuery și CSS
Butonul mare translucid apare atunci când derulați în sus pe pagină. Nu vedeți că este dificil. Made folosind doar JQuery si CSS.
Înțelegem cu HTML:
Pentru a opera conținutul principal al butoanelor de pagini, care urmează să fie defilat, care urmează să fie plasate între două etichete:
Nu este nimic special, doar lipiți codul în fișierul CSS pentru stilul site-ului.
Prima linie - biblioteca de conectare, în cazul în care site-ul dvs. este deja conectat atunci omite. Toate cod este plasat între etichetele
. .
Extensii pentru plugin-uri Joomla și WordPress pentru a vă permite să creați butonul „Back“.
În opinia mea cu privire la orice CMS este cel mai bun de a utiliza una dintre soluțiile de mai sus, dar dacă nu știi cum să se conecteze script-urile date pe site-ul dvs. pentru Joomla sau WordPress, puteți utiliza următoarele extensii gata făcute, gratuite și plugin-uri.
