Hogyan készítsünk egy sima görgetés az egész hely a jQuery és CSS

Üdvözlet, kedves barátaim. Ahogy talán már észre, hogy szinte minden böngésző görgetés weboldalakon nagyon éles és gyönyörű. És persze szeretnék lapozzunk webhely simábban, természetesen meg lehet csinálni, és még erősen, hogy ne feszítse. Ez úgy történik, egy egyszerű jQuery plugint, és néhány CSS szabályokat. És annak érdekében, hogy hogyan működik javasoljuk, hogy vessen egy pillantást a demo, amely alatt található.

Ι Demo letöltése

Most térjünk rá a kapcsolódási finomgörgetés honlapunkon.

Először is meg kell csatolni a jQuery könyvtár. Ha már kapcsolódnak, kihagyhatja ezt a lépést:

Ezután meg kell csatolni magát JQuery plugin, ami a felelős a sima görgetés, és vele is jön néhány CSS szabályokat, amelyek megváltoztatják a nagyon görgetősáv az oldalon. Bővebben rovására görgetősáv lesz szó részletesebben a következő leckében, és eddig csak sima görgetés. De magukat a szabályokat, és a plugin:

Mindent. Most az első és legfontosabb lépés, amit eddig tettünk. Most mi kell hozzá egy egyszerű szabályt CSS stílusokat honlapunkon.

Meg kell világossá tenni, hogy a beépülő modul nyúlt a szélessége az oldal, és 100% -ban magas. Gondoskodjunk róla, hogy ez a szabály a CSS másképp görgetés nem működik.

Miután hozzáadott mindent, ami a fent bemutatott, meg kell, hogy tartalmazza a forgatókönyvet is, amelyhez kapcsolódnak vyshe.Eto nagyon egyszerű, csak kell hozzá kívánatos a zárás előtt a végén a helyszínen kód:

És most azt javaslom, hogy részletesen elemzik a demo példa. És kezdjük a HTML.

HTML demo

Most nézzük meg a CSS-szabályok.

CSS a demo

CSS-szabályok is nagyon egyszerű, és nem sok, mint látható, hogy vannak állandó betűkészletek a Google, annak érdekében, hogy vizuálisan demo gyönyörű volt.

Ι Demo letöltése

Ez tulajdonképpen az összes barátok. Most van egy oldal, egy hűvös és gyönyörű sima görgetés, amelyet mi és a felhasználók élvezhetik. Ez a szkript venni itt. De lapozzunk készült egyedi kütyü, hogy több, és megváltoztatta a görgetősáv. A sávok fogunk beszélni csak a következő leckét. De most eddig mindent.