Cum de a face o defilare buna pentru întregul site folosind jquery și css

Salutări, dragi prieteni. După cum poate ați observat că aproape toate browserele defilare pe site-uri este foarte ascuțit și frumos. Și, desigur, aș dori să defila la site-ul mai lin, desigur, se poate face și, de asemenea, puternic pentru a nu tulpina. Acest lucru se face cu ajutorul unui plugin simplu JQuery și câteva reguli CSS câteva. Și pentru a vedea cum funcționează sugerăm să luați o privire la demo-ul, care este situat mai jos.

Ι Demo Descărcați

Acum, să trecem la atașarea de defilare buna pe site-ul nostru.

În primul rând, trebuie să atașați biblioteca JQuery. Dacă ați atașat deja, săriți peste acest pas:

Apoi, trebuie să se atașeze JQuery plug-in care este responsabil pentru defilarea noastră lină, și cu ea vin, de asemenea, unele reguli CSS care modifică bara de defilare foarte pe site. Citește mai mult în detrimentul barei de derulare vor fi discutate mai în detaliu în următoarea lecție, și până în prezent doar defilarea lină. Dar regulile ei înșiși și plugin-ul:

Totul. Acum, primul pas important am făcut deja. Acum trebuie să adăugați o regulă simplă în stiluri CSS pe site-ul nostru.

Este necesar să se arate clar pluginul care se întindea lățimea paginii, și este de 100% în înălțime. Asigurați-vă că pentru a adăuga această regulă la CSS altfel defilare nu va funcționa.

După ce ați adăugat tot ceea ce este prezentat mai sus, trebuie să includă script-ul în sine, pe care am atașat vyshe.Eto este foarte simplu, trebuie doar să adăugați de dorit înainte de închidere la sfârșitul codului site-ului:

Și acum propun să analizeze în detaliu exemplul demo. Și vom începe cu HTML.

Demo HTML

Acum, să ne uităm la regulile CSS.

CSS din demo

regulile CSS sunt, de asemenea, foarte simplu și nu sunt multe, după cum se poate vedea că există fonturi fixe de la Google, pentru a vizual demo-ul privit frumos.

Ι Demo Descărcați

Asta e, practic, toți prietenii. Acum avem un site cu o defilare netedă rece și frumoasă, pe care noi și pentru utilizatorii noștri se pot bucura. Acest script este luat aici. Dar nu parcurgeți spre făcute pentru widget-uri individuale care mai mult și a schimbat bara de derulare. Despre benzile vom vorbi doar în lecția următoare. Dar acum totul până acum.