Trei dintre cele mai bune moduri de a face pagina de parcurgere în sus

Trei dintre cele mai bune moduri de a face pagina de parcurgere în sus

Pentru un vizitator resursa dvs. de web de fiecare dată după ce ați citit articolul dumneavoastră interesant la sfârșitul anului, nu chinuiasca roata mouse-ului său de calculator, derulând pagina până la meniu, este necesar ca el să facă un site sau blog butonul „Up“. care se va derula pagina web apăsând. În acest articol voi prezenta trei dintre cele mai bune moduri de a pune în aplicare această idee.






Și anume: o descriere a modului de a face butonul „Up“ și defilați pentru a implementa o pagină web simplu doar prin HTML si CSS. precum și cea mai bună soluție pentru a face o pagini de derulare fina folosind jQuery. Și, bineînțeles, instrucțiuni despre cum să-l aplice.
Să începem cu un simplu.

Butoanele și derulați pagina în sus prin HTML si CSS.

Este foarte simplu - acest buton este pus în aplicare prin intermediul așa-numita „ancora“. urmați acești pași:
Partea de sus a paginii, codul imediat după sau într-un bloc de meniu, în general, în locul în care doriți să derulați pagina, setați următoarea construcție.

În cazul în care id - referința de identificare.
Acum trebuie să plasați link-ul de sine-buton când faceți clic pe pagina de derulare pentru a va avea loc ancora. Structura sa poate fi plasat în orice loc convenabil, ca Poziția butonului este definit prin CSS. Codul este după cum urmează:

Și pentru a da proiectarea butonului se va adăuga CSS. va fi ca acest lucru:

Poziția a.idTop: fix; / * * Poziționare fixă ​​a butoanelor /
z-index: 9999; / * Este afișată în partea de sus a tuturor elementelor * /
bottom: 0%; / * Poziția de jos * /
dreapta: 0%; / * Poziția corectă * /
fundal: # 7db9e8; / * Fundal, puteți specifica orice imagine * /






opacitate. 6; / * * Transparent /
Culoare: #fff; / * Culoare text * /
padding: 10px; / * Umplere * /
margin: 5px 15px 15px 5px; / * Padding externă * /
>
a.idTop: hover opacitate: 1;
>

Sau puteți utiliza o imagine gata făcută dintr-un buton cu o săgeată în sus sau în ceva, este ca oricine. Apoi, codul pentru butonul arată astfel:

script jQuery pentru a derula continuu pagina

Această opțiune nu este foarte diferit de exemplul anterior, în HTML, dar este proiectat pentru a simplifica punerea în aplicare a două lucruri în derulare rapidă - a scăpa de plasare ancora și face defilare pagina mai lină. Mod de a pune în aplicare acest lucru:
- Conectați orice versiune de jQuery. mai bine ultimul program.
- Apoi vom adăuga script-ul pe site-ul prezentat mai jos:

- Se pune în blocul șablon cu selector .backtotop - buton de unitate de link.
- Am stabilit vizualizarea dorită prin CSS pentru ea. Puteți din exemplul anterior, cu excepția faptului că aici, de exemplu, face o versiune cu o imagine:

Poziția a.idTop: fix;
z-index: 9999;
bottom: 0%;
dreapta: 0%;
fundal: URL-ul ( '/yuor_image_64x64.jpg.') fără repetare;
înălțime: 64px;
lățime: 64px;
opacitate. 6;
Culoare: transparent;
padding: 10px;
margin: 5px 15px 15px 5px;
>
a.idTop: hover opacitate: 1;
>

Pro - ușor de frumusete de lucru scenariu, contra - mici funcționale și practice, și nu este ceva. Nu este întotdeauna necesar pentru a derula pagina a site-ului doar în sus, uneori, pe care doriți pentru a oferi utilizatorului posibilitatea de a reveni la site-ul faceți clic pe butonul sau în partea de jos a paginii.

jQuery pagini web plug derula în sus

În general, în linii mari, plugin-a dreptul numit scîrțîitul se transformă într-un fel, nu într-adevăr, datorită dimensiunilor sale foarte mici. Dar, în același timp, are toate funcțiile necesare. Acest script:
- lin suluri în sus;
- Butonul de derulare nu este vizibil în partea de sus a paginii, și apare ca parte a deja scrolled și dispare atunci când reveniți la început;
- Ea are o dimensiune mică și funcționează în toate browserele.

Astfel, codul HTML pentru butonul:

Poziția #toTop: fix;
z-index: 9999;
bottom: 10px;
dreapta: 10px;
fundal: # F4FFBF;
frontieră: #ccc solid 1px;
padding: 5px;
cursor: pointer;
culoare: # 666;
text-decoration: none;
lățime: 100px;
>

Poziția #toTop: fix;
z-index: 9999;
bottom: 10px;
dreapta: 10px;
fundal: URL-ul ( '/yuor_image_64x64.png.') fără repetare;
lățime: 64px;
înălțime: 64px;
frontieră: nici una;
padding: 5px;
cursor: pointer;
Culoare: transparent;
text-decoration: none;
>

Și, de fapt, se pune el însuși jQuery plug-in, ca de obicei, înainte de închidere

Aici sunt trei soluții simple pentru a face un frumos și convenabil pagina butonul de defilare.