Miért van szükség erre a gombra, és amikor a legjobb, ha használni
Amikor az oldalon a helyén egy nagy számú felhasználói tartalom megismerkedett vele, és elherdálta az oldalt egy bizonyos ponton, vagy az aljára, gyakran elkezd görgetni a tetejére, hogy a navigációs linkek az oldal tetején, és \ vagy valamilyen műveletet végeznek.
Van egy nagyon egyszerű módja annak, hogy a felhasználó egy működőképes. Ez a módszer nem igényel bevonásával azokat a könyvtárakat, illetve további szkriptek és kizárólag a HTML és ha szükséges, az aktiválás CSS, azáltal, hogy közös belső linkek.
Ehhez bárhol, alján az oldalon, egyszerűen csak hozzá a következő kódot:
Mint látható, a megadott linkre .topbutton osztály segítségével, amelyek segítségével a CSS, akkor lehet, hogy minden kapcsolatot, a kívánt megjelenést, megtekinthetjük például ugyanazt a gombot.
CSS kód minta:
- Görgetés nem lesz sima, és megnyomása után a felhasználónak azonnal átirányítja az oldal tetején.
Előnyök az ilyen típusú gomb:
+ Működtetni a gombok nem kell használni szkriptek és nagy, térfogat, a könyvtár. És ez egy nagyon nagy plusz.
2. A gomb tetején jQuery
Gomb végre egyszerűen. A működéséhez szüksége lesz jQuery könyvtár, egy kis szkript, amely jQuery események, bizonyos stílusok és DIV címkét, amely tartalmazza a szöveget, és a szükséges azonosítót.
A gomb működik böngészők óta Firefox verzió 3.0.10 - 3.6.13, Internet Explorer 7 és 8, Google Chrome, jQuery 1.4.3. Sajnos, a gomb nem működik az IE 6, de szükség van rá :)?
A következő kódot kell beilleszteni a címke elé minden oldalon a webhelyen. Ha a jQuery könyvtár már csatlakoztatva van az oldalon, akkor nem kell hozzá az első sorban.
Ahhoz, hogy egy szép megjelenés gombot, akkor meg kell adnia a következő stílusokat. A legjobb, hogy adjunk a fájlt a webhely stílusát.
3. UItoTop JQuery plugin,
Egyszerű Plugin ami simává teszi a gombok és sima görgetés, amikor rákattintott. Ahhoz, hogy a bővítmény a webhely nincs szükség hozzá semmilyen vagy címkék a HTML-jelölést az oldal. Elég, hogy csatlakoztassa az összes szükséges plug-in fájlokat, és működni fog.
A letöltött archív a forrás, amelyben egy mappát az Ön honlapján. Hogy aktiválja a bővítményt, elegendő csatlakoztatni három hatályos js fájlokat. Ahhoz, hogy lehetővé teszi számukra, a zárás előtt
adja meg a következő fájl elérési útját:
A vezető út a megfelelő fájlokat összhangban a könyvtár, amelyben a fájlok találhatók plugin.
Felhívjuk figyelmét, hogy ha korábban már csatlakozott a webhelyére jQuery könyvtár, majd adjuk hozzá a következő kódot nem szükséges:
A következő lépés az, hogy adjunk CSS stílusok, anélkül, hogy a gomb nem működik. Csatlakoztassa őket kétféleképpen.
Az első módszer az, hogy adjunk minden oldalt a webhely, a címkék között
utalás a CSS stílus fájlban:
Ne felejtsük el, hogy módosítsa a fájl elérési útját.
A másik módszer, hogy másolja a teljes tartalmát ui.totop.css fájlt, és illessze be a webhely CSS fájl stílusokat. A második módszer sokkal ésszerűbb, mert nincs szükség extra kapcsolat fájlokat.
4. gördítő gombokkal felfelé és lefelé jQuery
A letöltési archívum tartalmazza az összes szükséges fájlokat a kezelőgombok. Ez a CSS, JS fájlokat és képeket, amit találtam a gyilkos.
Először el kell helyeznie a HTML kódot hívás gombok minden oldalon. Ehhez tegyük a későbbi szöveget közvetlenül a címke elé .
Ösvény vezet a JS fájlt ki kell cserélni a saját.
Az első sorban a kód köti össze a jQuery könyvtár, így ha korábban csatlakoztatva volt a helyén, azt el kell távolítani.
A következő a kapcsolatot egy másik JS fájlt, és a kód tartalmaz olyan különleges funkciókat kell figyelembe venni részletesebben. Mivel a segítséget meg tudják változtatni néhány paraméter a gombokat. Itt a kód egy magyarázat:
Ahhoz, hogy hozzá CSS csak csatlakozni az oldalaira style.css fájlt az archívumban a forrás:
De a legjobb megoldás az lenne, hogy másolja a stílusok a fájlt, és illessze be őket egy fájlba stílust a webhelyen.
5. Finomgörgetés gomb felhasználásával JQuery
Egy másik változata a szervezet finomgörgetés oldal tartalmának alulról felfelé, a jQuery. Gomb található a jobb alsó az oldal, és csak akkor jelenik meg, ha egy kicsit proskrolit le az oldalt. Minden végrehajtott segítségével egy kis darab CSS és JS kódot, valamint egy kis képet használunk egy gombot.
Szeretem ezt a gombot, hogy nem igényel létrehozását nagyszámú scriptek ugyanakkor ez jó hatással van.
Most nézzük meg, mit kell tenni, hogy csatlakoztassa a gombot az oldalra
Szükséged lesz egy kép a gomb maga vehet minden, és tudja használni itt: icon_top.png
A hívás gombot, miután a kezdőlapra, vagy azt megelőzően a tag helyezd el az alábbi HTML kód:
Ezzel a kóddal, kivéve a megjelenést, mi határozza meg a helyzetét a gombot, és a francia 100 px jobbra és alulról 50 px. A legjobb, ha egy fájlt a webhely stílusokat.
A kezdéshez csatlakoztassa a könyvtár, ha nem csatlakozik a webhelyen. Ehhez a címkéket
. ? illessze be a következő:
Aztán, amint a kapcsolat könyvtár, akkor keresse meg a következő kódot JQuery:
Első ScrollTop - meghatározza a jelenlegi helyzetben a függőleges görgetősáv, és ha ez nagyobb, mint 100 px, a gomb automatikusan megjelenik. Ha azt szeretnénk, hogy megjelenjen előbb-utóbb változtatni a kívánt irányba értéket.
Mint látható, két lehetőség van - 0 - azt jelenti, hogy az oldal görgethető fel az elején a pixel a nulla és 600 - az animáció sebességét milliszekundum.
6. Animált átmenet begombol
Lapozás közben oldalt egy bizonyos számú szimbólumot le a bal alsó sarokban van egy nagy gomb egy nyíllal. Ha az egér kurzor gomb világít simán, és ha rákattint finomgörgetés fordul fel.
Ahhoz, hogy hozzon létre egy gombot a nyíl kép, CSS stílusok és JQuery.
A fényképek nyilakat használnak itt található: up-arrow.png
Hívni a gombot, a következő HTML kódot:
De meg kell elhelyezni, hogy közvetlenül előtte a fő tartalmát az oldal, ha inkább a záró tag , A gomb nem fog működni.
És még egy fontos pont a HTML kódot. címke
meg kell rendelni egy felső azonosítót.
Ha a címke
már hozzá van rendelve egy adott id, akkor a hívó kód gombok fölött található, ki kell cserélni #top # a-id
A CSS meghatározott árrés és a megjelenés gombok, hozzáadunk átmenet ingatlan: létrehozni egy késleltetés hatása hover. Embed jobb a CSS fájlban a webhelyen.
Az első sor a kapcsolat jQuery könyvtár, ha van csatlakoztatva, ez a sor nincs hozzáadva. Adjuk hozzá a többi kódot a címkék között
.
Meg lehet változtatni a következő opciókat szükség szerint:
100 - a pixelek száma, amely után a scroll gomb jelenik meg;
0 - ez azt jelenti, hogy a görgetés lesz nulla pixel, azaz akár a felső ...
800 - ez a görgetés sebessége ezredmásodperc.
7. áttetsző gomb segítségével jQuery és CSS
Nagy áttetsző gomb jelenik meg, ha felfelé az oldalon. Nem látja, hogy nehéz. Készülnek csak jQuery és CSS.
Tisztában vagyunk azzal, HTML:
Működtetni a fő tartalma a oldal gombok, lehet görgetni, kell helyezni a két tag:
Nincs semmi különös, csak másold be a kódot a CSS stílus a webhelyen.
Az első sorban - a kapcsolat a könyvtár, ha a webhely már csatlakoztatva van, akkor kihagyja. Minden kód kerül a címkék között
. .
Extensions for Joomla és WordPress plugin, hogy lehetővé teszi, hogy hozzon létre a „Vissza” gombot.
Véleményem bármilyen CMS a legjobb használni az egyik megoldás a fenti, de ha nem tudja, hogyan csatlakozhat az adott script, hogy a webhely a Joomla vagy a WordPress, akkor az alábbi kész, szabad bővítmények és beépülő modulok.
