Állítsa be a parancsfájlt a jquery felé
Hello. Hosszú ideig nem volt hasznos a jQuery-nál. Manapság csúsztassa a szkriptet a jQuery felé. Ez szinte minden oldalon szükséges, és egy harmadik féltől származó plug-in és sok felesleges kód használata nem kívánatos.
Ha a weboldal létrehozásának témája nem nagyon érdekes, akkor a szakemberek számára kulcsrakész kulcs létrehozása kiváló megoldás.
Hogyan lehet a scriptet felfelé görgetni a jQuery-n
Kezdjük egy egyszerű HTML-vel:
Ez a kód maga a gomb, amelyet hozzá kell adni a HTML-hez.
Térjünk rá a CSS, leírni a stílus egy gomb, ami a statikus a jobb alsó, áttetsző, árnyék, kerek és lebegni ez még inkább láthatóvá válnak.
Amint látja, hogy a nyílszimbólumot nem adjuk hozzá a HTML-nek, így egyszerűsítjük az elrendezést, hozzáadtuk a CSS-en keresztül. Ezen túlmenően, a CSS általunk leírt összes gomb - ez a kör egy árnyék van rögzítve a jobb alsó, lebeg jobban érzékelhető.
A CSS befejeződött. Most nézzük meg a jQuery-t. A jQuery-től 2 dolgunk van:
- a gomb felfelé mutató megjelenítésének meghatározása vagy sem (az oldal görgetésének mértékétől függ)
- valójában simán gördíti le az oldalt, amikor megnyomja a gombot
Először is rendelheti az eseménykezelő az oldal tekercset, és csináld ellenőrzés: ha az oldal görgetése több, mint a képernyő mérete, ez már lehetséges, hogy bemutassák a gomb „fel”, ha az oldal görgetése kevesebb - ellenkezőleg elrejteni.
Ezután adja hozzá a klikk eseménykezelőt a "fel" gombunkhoz. Ebben mozgatjuk a scrollTop tulajdonságot html és body (a cross-browser-kompatibilitáshoz).
Kész, a gomb fel - működik.
Az eredmény itt látható:
Kezdetben a gomb nem látható, egy kicsit kinyitnia kell a területet az előnézettel (a kezelő munkához és ellenőrzéséhez).
Biztonságosan telepítheti ezt a kódot az oldalon, és kellemesen meglepte, hogy működik, és nem igényel további plug-ineket és szkripteket. Csak néhány sornyi kódot a JS, CSS és csak egy sort a HTML (by the way, nem HTML is lehet kezelni és felhasználni JS csak azt, hogy adjunk egy gombot, miután az oldal betöltésekor).
A cikk minden kódja megtalálható a jsfiddle-ben.