Efectuarea butonul de sus pentru un site

anterior ◈ următoarea

În acest post, vom face „de sus“, esența ei - va apărea atunci derulând în jos pe site-ul și atunci când faceți clic pe el, trimite utilizatorul la partea de sus a paginii curente. Cred că o mulțime de ea, nu este necesar să se explice, ne-am intalnit toti butoane similare „sus“ pe multe site-uri.







Planul de a crea un buton „Back“

1. Crearea structurii HTML pentru buton.
2. Styling ei. Hai să-l invizibil și așezați marginea din dreapta a paginii cu privire la site-ul.
3. Scrieți un script care va afișa un buton după parcurgerea și tratarea utilizatorul apăsând pe butonul „Înapoi“

Deci, cu planul de acțiune pentru crearea de butoane în partea de sus toate clare, proceda la punerea sa în aplicare

1. Crearea unei structuri HTML pentru butonul „Back“

Codul de buton va plasa înainte de închidere

2. Stiluri pentru butonul „Top“

Butonul am decis să fac o poziție fixă ​​în colțul din dreapta jos. Am întrebat pictograma fix dimensiunea, face culoarea de fundal și colțuri rotunjite.
De asemenea, înființat un stil Hover pentru eveniment și să facă o tranziție lină cu ajutorul proprietății de tranziție.

3. Script-ul pentru butonul „Top“

Pentru a începe să declare mai multe variabile. Prima limită - va avea o valoare de 1/3 din înălțimea ecranului, și va servi ca o condiție prealabilă pentru apariția butonului nostru „Back“.
În al doilea rând backToTop - va păstra butoanele noastre de selecție jQuery, astfel încât să nu se refere la el de mai multe ori.







Scriem condiția pentru apariția și dispariția butonului nostru. Condiția în acest caz, ar fi pentru a verifica dacă utilizatorul a defilat în a treia a ecranului sau nu.
Dacă derulați, butonul „Up“ - va apărea în cazul în care nu există sau a revenit la partea de sus, atunci acesta va dispărea.

Atingerea finală - lega evenimentul click pe butonul nostru „Up“. Când apăsați butonul, noi trebuie să îndurăm până în partea de sus a paginii curente. Facem acest lucru cu câteva linii de cod:

Aici este întregul cod în întregime

concluzie

Așa că am terminat lucrările privind crearea butonului „Top“. Aceasta este doar una dintre opțiunile pe care le puteți diversifica prin utilizarea face modificări la partea CSS a acestui post.
În demo articol utilizat pentru efectele CSS descrise în acest post, „CSS Animație Biblioteca“

Bună ziua, de fapt, ar trebui să funcționeze și așa și așa
Genul în cazul în care aveți codul de acum - nu foarte rău, face elemente de utilizare ale unei case în variabilele - este bună, dar pentru ei este de a face numele variabilei cu un caracter $ la început, pentru a distinge variabile jQuery asupra variabilelor cu valori simple, cum ar fi:

Poti arunca codul, cred că nu există ...

În exemplul meu, opțiunea de a reveni:

Da, am realizat cu variabile, mulțumesc pentru sfat. Aici este o bucată de cod. jQuery conectat la antetul (prima a fost la sfârșitul anului, dar sa mutat în sus în a stabili motivele pentru care nu a lucrat handler clic)

piesa Badi în continuare referitoare la derularea.

var topScroll = $ ( '# scroll-top');
corp var = $ ( 'body');

topScroll.click (funcția () body.animate (1000);
return false;
>
);

Aici funcționează așa cum trebuie.
Dacă în schimb body.animate (1000); apel metoda de animație, după cum urmează:
$ ( 'Corp') însuflețit (1000) .; aceasta nu funcționează.
!->







anterior ◈ următoarea