Így a felső gomb egy oldalon
Ebben a bejegyzésben, akkor nem a „top”, a lényeg - akkor jelenik meg, amikor lefelé görgetés a honlapon, és ha rákattint, akkor küldje a felhasználót, hogy a tetején az aktuális oldalon. Azt hiszem, egy csomó nem szükséges magyarázni, mindannyian találkoztunk hasonló gombok „up” Számos weboldal.
Terv, hogy hozzon létre egy „Vissza” gomb
1. Hozzon html struktúrát a gombot.
2. Styling neki. Nézzük, hogy láthatatlan, és helyezze a jobb szélén az oldal tekintetében a helyszínen.
3. Írj egy script, ami megjelenik egy gomb görgetés után, és kezeljük a felhasználó lenyomja a gombot „Vissza”
Tehát a cselekvési terv létrehozását tetején található gombok teljesen világos, folytassa a végrehajtás
1. Hozzon létre egy html struktúra a „Vissza” gomb
Gombkód helyezi a zárás előtt
2. stílusok a „Top” gomb
Gombot úgy döntöttem, hogy egy fix helyzetben a jobb alsó sarokban. Megkérdeztem ikon fix méretű, a háttér színe és lekerekített sarkokkal.
Szintén létrehozott egy légpárnás stílus az esemény, és a zökkenőmentes átmenetet segítségével átmenet tulajdon.
3. A script a „Top” gomb
Kezdeni állapítsa több változó. Az első korlát - lesz értéke 1/3 a képernyő magasságát, és alapul szolgál előfeltétele a megjelenése a „Vissza” gombot.
Második backToTop - fogja tartani a jQuery gombok, hogy ne olvassa el többször.
Írunk a feltétele a megjelenése és eltűnése a gombot. A feltétel ebben az esetben az lenne, hogy ellenőrizze, hogy a felhasználó görgetni harmadik a képernyőn, vagy sem.
Ha lapozunk, a gomb „Up” - jelenik meg, ha nincs, vagy vissza a csúcsra, akkor el fog tűnni.
Az utolsó érintés - ez köti a click esemény a mi gomb „Up”. Ha megnyomja a gombot, meg kell elviselni, hogy a tetején az aktuális oldalon. Tesszük ezt a néhány sornyi kódot:
Itt van a teljes kód teljesen
következtetés
Így fejezte be munkáját létre a „Top” gomb. Ez csak az egyik lehetőség, hogy változatosabbá segítségével módosítani kívánja a CSS része ezt a bejegyzést.
A demo során használt és CSS leírt hatások ebben a bejegyzésben, „CSS animáció Library”
Szia, valóban működjön, és így és így
Az a fajta, ahol van a kód most - nem túl rossz, hogy használják elemeit egy ház a változók - jó, de nekik az, hogy a változó nevét a $ karakter az elején, hogy különbséget jQuery változók változók egyszerű értékek, mint:
Akkor dobja el kódot, azt hiszem, hogy nincs ...
Az én például a lehetőséget, hogy visszatérjen:
Igen, rájöttem változók, kösz a tanácsot. Itt van egy darab kódot. jQuery csatlakozik a header (első volt a végén, de felfelé mozdul kiderítéséhez, hogy miért nem működik a kattintás felvezető)
További Badi darab kapcsolatos a görgetés.
var topScroll = $ ( '# scroll-top');
var test = $ ( 'test');
topScroll.click (függvény () body.animate (, 1000);
return false;
>
);
Itt működik, ahogy kellene.
Ha ehelyett body.animate (, 1000); hívja a módszer az animáció az alábbiak szerint:
$ ( 'Body') élő (1000) .; ez nem működik.
!->