Cum să derulați corect pagina în sus sau în jos

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.

Exemplu de cod CSS:

topbutton <
lățime. 100px;
de frontieră. 2px solid #ccc;
fundal. # f7f7f7;
text - aliniere. centru;
umplutură. 10px;
poziție. fixe;
de jos. 50px;
dreapta. 50px;
cursor. pointer;
culoare. # 333;
font - familie. Verdana;
font-size. 12px;
raza de frontieră. 5px;
- moz - raza de frontieră. 5px;
- webkit - raza de frontieră. 5px;
- khtml - raza de graniță. 5px;
>

Text ascuns (trebuie să introduceți datele de conectare sau să vă înregistrați și să aveți 21 de mesaje):

Nu aveți permisiunea de a vizualiza textul ascuns conținut aici.

2 / Butonul Up cu jQuery
Butonul este implementat destul de simplu. Aceasta necesită o bibliotecă jQuery, un mic script care conține evenimente jQuery, anumite stiluri și o etichetă DIV care conține textul însuși și codul necesar.

Butonul funcționează în browsere de la versiunile 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 aveți nevoie de ea :)?

Codul de mai jos trebuie inserat în pe toate paginile site-ului dvs. Dacă biblioteca jQuery este deja conectată la site-ul dvs., nu este necesar să adăugați prima linie.

$ (fereastră). derulați (funcția ()

dacă ($ (acest). scrollTop ()! = 0)

$ ('#toTop'). faceți clic pe (funcția ()

Pentru a adăuga un aspect frumos butonului, trebuie să adăugați următoarele stiluri. Acestea sunt cel mai bine adăugate la foaia de stil a site-ului dvs.

#toTop <
lățime. 100px;
de frontieră. 1px solid #ccc;
fundal. # f7f7f7;
text - aliniere. centru;
umplutură. 5px;
poziție. fixe;
de jos. 10px; / * indentați butonul din partea de jos a paginii * /
dreapta. 10px;
cursor. pointer;
afișare. nici unul;
culoare. # 333;
font - familie. Verdana;
font-size. 11px;
>

Pentru a apela butonul, adăugați următorul cod HTML înaintea etichetei .