Buna ziua. Pentru mult timp nu am avut nici o utilitate în jQuery. Astăzi, parcurgeți scriptul până la jQuery. Acest lucru este necesar pe aproape fiecare site, iar utilizarea unui plug-in terță parte cu multe coduri inutile nu este foarte de dorit.
Dacă chiar tema creării unui site pentru dvs. nu este foarte interesantă, atunci crearea unui site la cheie de la profesioniști este o soluție excelentă.
Cum se face scroll scroll până pe jQuery
Să începem cu un simplu cod HTML:
Acesta este codul butonului însuși, pe care trebuie să-l adăugați la codul HTML.
Să trecem la CSS, descrie stilul unui buton, făcându-l static pe partea din dreapta jos, translucid, cu umbra, rotund și să planeze a devenit mai vizibil.
După cum puteți vedea, pentru a nu adăuga simbolul săgeții la HTML, simplificând aspectul, am adăugat-o prin CSS. În plus, în CSS, am descris totul pentru buton - este rotunjit cu o umbră, este fixat în partea dreaptă jos, când mutarea devine mai vizibilă.
Cu CSS terminat. Acum să ne uităm la jQuery. Din jQuery avem 2 lucruri:
- definirea afișării butonului "sus" sau nu (depinde de gradul de derulare a paginii)
- de fapt, derulează ușor pagina în sus când apăsați butonul
În primul rând, atribuim de tratare a evenimentelor paginii de parcurgere, și fă-o în a verifica: dacă pagina este defilat mai mult decât dimensiunea ecranului, este deja posibil să se arate butonul „sus“, în cazul în care pagina este defilat mai puțin - pe ascunde contrar.
Apoi adăugați funcția de preluare a evenimentului clic pe butonul "sus". În acesta animăm proprietatea scrollTop la html și corp (pentru compatibilitatea cu browserul încrucișat).
Efectuat, butonul de pornire - funcționează.
Puteți vedea rezultatul aici:
Inițial, butonul nu este vizibil, trebuie să deschideți ușor zona cu previzualizare (pentru ca mesagerul să funcționeze și să verifice).
Puteți instala în siguranță codul de pe site-ul și va fi plăcut surprins de faptul că funcționează și nu are nevoie de plug-in-uri și script-uri suplimentare. Doar câteva linii de cod în JS, CSS și doar o singură linie de cod HTML (de altfel, nici HTML este, de asemenea, posibil de a gestiona și utiliza JS numai, este de a adăuga un buton după încărcarea paginii).
Toate codurile din articol sunt disponibile pe jsfiddle.
Articole similare
Trimiteți-le prietenilor: