Három legjobb módja, hogy az oldal scroll up

Három legjobb módja, hogy az oldal scroll up

Ahhoz, hogy a látogató a webes erőforrás minden alkalommal elolvasása után érdekes cikket, hogy a végén, ne gyötörj volánja számítógépes egér, görgetés az oldal felfelé a menüben, szükség van rá, hogy egy weboldal vagy blog „Up” gombot. amely gördül a weboldal megnyomásával. Ebben a cikkben bemutatom három legjobb módja, hogy végre ezt az elképzelést.






Nevezetesen: egy leírást, hogyan lehet az „Up” gombot, és lépjen végre egy egyszerű weboldal csak HTML és CSS. valamint a legjobb megoldás, hogy egy sima görgetés oldalak jQuery. És persze, útmutatást, hogyan kell alkalmazni azt.
Kezdjük egy egyszerű.

Gombok és lapozzunk az oldalt egészen a HTML és CSS.

Ez mind nagyon egyszerű - ez a gomb révén hajtják végre az úgynevezett „horgony”. kövesse az alábbi lépéseket:
Az oldal tetejére, a kód után azonnal vagy egy menü blokk, általában azon a helyen, ahová akar görgetni az oldalt, meg az alábbi konstrukciót.

Amennyiben id - az azonosító hivatkozást.
Most meg kell helyezni a link is gomb, amelyre kattintva görgetés az oldalt a horgony fog bekövetkezni. Szerkezete lehet helyezni bármely kényelmes helyen, mint pozíciója a gomb által meghatározott CSS. A kód a következő:

És hogy ez a design a gombra, majd CSS. lesz, mint ez:

a.idTop helyzet: fix; / * * Javítva elhelyezése a gombok /
z-index: 9999; / * Látható a tetején az összes elemet * /
alsó: 0%; / * Pozíció alsó * /
jobbra: 0%; / * A megfelelő pozíció * /
háttér: # 7db9e8; / * Háttér megadhatja bármelyik képet * /






fényelnyelés. 6; / * Átlátszó * /
szín: #fff; / * A szöveg színe * /
padding: 10px; / * * Kitöltés /
margin: 15px 15px 5px 5px; / * Külső padding * /
>
a.idTop: lebeg opacitás: 1;
>

Vagy használhatja a kész kép egy gombot egy nyíllal, vagy valami, akkor, mint bárki más. Ezután a kódot a gomb így néz ki:

jQuery script, hogy folyamatosan felfelé az oldalt

Ez a lehetőség nem nagyon különbözik az előző példában, a HTML-ben, de úgy tervezték, hogy egyszerűsítse a végrehajtását két dolgot gyors görgetés - megszabadulni a horgony elhelyezés és teszik görgetés simább oldal. Módja a következő:
- Csatlakozás bármely változata jQuery. Jobb persze tart.
- Ezután adjuk hozzá a forgatókönyvet, hogy a honlapon az alábbiak szerint:

- Helyezzük a sablont blokk választó .backtotop - egység link gombra.
- Mi meg a kívánt nézetet a CSS érte. Akkor az előző példában, azzal az eltéréssel, hogy itt, például, hogy egy változat kép:

a.idTop helyzet: fix;
z-index: 9999;
alsó: 0%;
jobbra: 0%;
background: url ( '/yuor_image_64x64.jpg.') no-repeat;
magasság: 64px;
szélesség: 64px;
fényelnyelés. 6;
szín: átlátszó;
padding: 10px;
margin: 15px 15px 5px 5px;
>
a.idTop: lebeg opacitás: 1;
>

Előnyök - könnyen forgatókönyvet a munka szépségét, hátránya - kis és praktikus, és ez nem valami. Nem mindig szükséges görgetni az oldalon a webhelyen csak fel, néha szeretne, hogy a felhasználó a lehetőséget, hogy visszatérjen a helyszínen kattintson a gombra, vagy az az oldal alján.

jQuery plugint web oldalak felfelé

Általában, és a nagy, egyenesen nevű plugint a nyikorgó valahogy nem igazán fordul miatt nagyon kis méretű. De ugyanakkor, hogy az összes szükséges funkciót. Ez a szkript:
- simán gördül felfelé;
- scroll gomb nem látható, a lap tetején, és úgy tűnik, részben a már görgetni, és eltűnik, ha visszatér a csúcsra;
- Ez egy kis méretű, és működik minden böngészőben.

Így HTML kódot az gombot:

#toTop helyzet: rögzített;
z-index: 9999;
bottom: 10px;
jobbra: 10px;
háttér: # F4FFBF;
border: 1px szilárd #ccc;
padding: 5px;
kurzor: pointer;
color: # 666;
text-decoration: none;
szélesség: 100px;
>

#toTop helyzet: rögzített;
z-index: 9999;
bottom: 10px;
jobbra: 10px;
background: url ( '/yuor_image_64x64.png.') no-repeat;
szélesség: 64px;
magasság: 64px;
border: none;
padding: 5px;
kurzor: pointer;
szín: átlátszó;
text-decoration: none;
>

És valóban, helyezze magát jQuery plugint, mint mindig, a zárás előtt

Íme, három egyszerű megoldás, hogy egy szép és kényelmes scroll gomb oldalt.