Az olyan funkció, mint az oldal „fel” gombja, kényelmesebbé teszi az internetes forrást látogatói számára. Segítségével könnyedén mozoghat az oldal bárhonnan az oldal tetejére. Ez kötelező az online áruházak és a nagy cikkeket tartalmazó webhelyek számára, amelyek hosszú lefelé görgetést igényelnek.
Mit jelent?
Jelenleg a legtöbb webhelyen nincs olyan funkció, mint a "fel" gomb, és ebben nincs semmi kritikus. Használata azonban számos előnnyel járhat mind az internetes források, mind a látogatók számára.
Előny a látogatók számára
Gyakran előfordul, amikor egy internetes forrás oldala tele van információval, amikor egy információs cikk sok helyet foglal el, és az egérgörgővel kell lejjebb görgetni az oldalon. Ezen túlmenően a cikk végén sok hozzászólás is lehet hozzá.
Amikor a látogató elolvas egy cikket, nincs semmi fárasztó az oldal lefelé görgetésében, de amikor a szöveg véget ért, és feljebb kell lépnie, az kezd kicsit fárasztó lenni. A legtöbb ember egyszerűen túl lusta lesz ahhoz, hogy sokáig görgessen, és egyszerűen bezárja az old alt, ahelyett, hogy még egyszer körbejárná a teret.
A gomb használatávalha azonnal az oldal tetejére lép, kényelmesebbé válik az oldalon való időtöltés.
Előny az internetes forrás számára
Maga az erőforrás pozitívumai a múltbeli tényezőkből származnak, mivel a webhelyen való könnyebb navigáció javítja a viselkedési tényezőket, mivel minden látogató aktívabb lesz a tevékenységében, és más oldalakra lép.
Így ezek a viselkedési tényezők befolyásolják az összes keresőmotor hozzáállását a webhelyhez, és a keresési eredményekben elfogl alt pozíció javulásához vezetnek.
Hogyan készítsd el magad a "fel" gombot az oldalon
További üzlet. Bármelyik CMS-en saját maga is létrehozhat egy görgetőgombot egy webhelyhez, mindössze néhány rendkívül egyszerű lépést követve:
- képkészítés;
- szkript létrehozása;
- gombstílus létrehozása;
- hozzáadás a webhelyhez.
Gomb képe
A "fel" gomb hozzáadásához először magát az ikont kell elkészítenie, amikor rákattint, a felhasználó az oldal tetejére kerül. Ehhez használhat kész opciókat, amelyek közül mindig kiválaszthatja a legmegfelelőbbet.
A gomb megjelenésének javításához néhány fejlesztést kell végrehajtanunk, nevezetesen egy olyan sprite-ot kell készítenünk, amely lehetővé teszi, hogy CSS-alapú háttérképeket kombináljunk, és ezáltal animációt készítsünk belőlük.
Grafikai munkákhoz bármilyen szerkesztőt használhat. De a legkényelmesebb megoldás egy online szolgáltatás lenne. PIXLR, mivel itt nincs mit letölteni, és közvetlenül a böngészőben használhatja.
A kezdéshez a megjelenő szerkesztő ablakban válassza ki a "Kép feltöltése számítógépről" mezőt. Vegyük például egy rakéta képét.
Ha a kiválasztott ikon méretei túl nagyok, akkor kis méretbeállítást kell végrehajtania. Ehhez lépjen a felső menübe, és válassza ki a "Szerkesztés" mezőt, majd az "Ingyenes átalakítás…" után
Ezután a kép mellett speciális markerek jelennek meg, melyek mozgatásával módosíthatja a kép méretét. Az arányok megtartásához használhatja a Shift billentyűt, amelyet lenyomva kell mozgatnia a kék jelölőket. A lépések végén egy rakéta képe jelenik meg.
A következő lépés a réteg másolatának létrehozása.
Most egy kicsit feljebb kell mozgatnia a rakéta képét az új rétegről. Ehhez kényelmesen használható a mozgatási eszköz, amely a bal oldali menü második oszlopában található, és a felfelé mutató nyíl a billentyűzeten.
Most a felső képet fekete-fehérré kell tennünk. Ezt a felső menü "Javítás" - "Színemény / Telítettség" elemével teheti meg. A teljes deszaturáció érdekében a Telítettség csúszkát -100-ra kell állítani. Ezzel a művelettel olyan effektust hozhat létre, amelyben a „Fel” gomb fekete-fehérről színesre vált, ha rámutat.
Az utolsó simítás az extra hely eltávolítása a két kép körül. Ehhez a bal oldali menüből válassza ki a "Vágás" menüpontot éscsak két rakétát választunk ki egy téglalapban. A kivágás végrehajtásához nyomja meg az Enter billentyűt.
Az eredmény egy olyan kép, amelyen nincs extra szabad hely. Fel kell írnia az eredményül kapott kép szélességét és magasságát, mivel ezek az adatok hasznosak lesznek a következő lépésben.
A mentéshez kattintson a "Fájl" - "Mentés" gombra, ahol a bal oldali "Sajátgép" bekezdésbe írjuk a kép nevét (csak az angol elrendezést), válassza ki a formátumot (ebben kis- és nagybetű, PNG) és kattintson az "Igen" gombra.
Fájl a "fel" gomb szkriptjével
Ebben az esetben nem kell szkriptet írnia. Lehetőség lesz a nyilvános verzió használatára, némi módosítással a kész kódon.
Ehhez bármilyen kódszerkesztőt le kell töltenie. A legnépszerűbb és egyben ingyenes lehetőség a Notepad++. A telepítés után ki kell másolnia és be kell illesztenie az összes kódot:
| $(dokumentum).ready(function(){ $(window).scroll(function () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} else {$('scroller').fadeOut();}}); $('scroller').click(function () {$('body, html').animate({scrollTop: 0}, 400); return false;}); }); |
Következő lépésként kattintson a felső menüben a "Fájl" - "Mentés másként…" elemre, ezután mentjük a kódot.js formátumban. Ezt követően használhatja ezt a kódot a webhelyén, ha FTP-kapcsolaton keresztül feltölti rá a szkriptfájlokat és képeket.
Telepítés a webhelyen
A webhely görgetőgombjának beállításához be kell helyeznieszükséges helykód. A. címke elé kell beírni
Gombstílus létrehozása CSS-sel
A webhely "fel" gombja leggyakrabban alul ("lábléc") található.
A következő kódot kell hozzáadni a webhely style.css fájljához:
|
/Fel gomb/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/natív kép elérési útja/ width:39px;/ gomb szélesség/ height:96px;/50% gomb magasság/ bottom:5px;/alsó kitöltés rögzített pozícióban/ bal:89%;/shift balra/ }.scrollTop:hover{ background-position:0 -108px; } /háttéreltolás/" |
Ebben az esetben a kép szélességi és magassági adataira lesz szükség. Csak be kell írnia a kapott adatokat a kódba, és a webhely "fel" gombja készen áll! Mi más?
Fel gomb a Wordpress webhelyhez
Ennél a CMS-nél a "Fel" gomb beépülő modulokkal és függetlenül is létrehozható.
A beépülő modulok módszere a legkényelmesebb és legegyszerűbb telepíteni, mivel csak a telepítés gombra kell kattintania, és be kell állítania az összes funkciót a bővítmény menüjében.
Utóbbi választását óvatosan kell megközelíteni, mert ezzel könnyen lehet vírust szerezni az oldalon. A legnépszerűbb és bevált lehetőség a Scroll Back To Top nevű bővítmény. Letöltheti a Wordpress beépülő modulok szabványos keresésével.
Ez a bővítmény rendelkeziktöbb funkciót, és nagyon könnyű lesz testre szabni a "fel" gombot egy Wordpress webhelyhez. Egyáltalán nem szükséges az összes értéket megváltoztatni, csak a gomb megjelenését és helyét kell konfigurálni a webhely oldalán.
Amint látja, a beépülő gomb beállítása a bővítményekkel nagyon egyszerű. De van egy fontos árnyalat, hogy minden telepített bővítmény betölti a CMS-t. Ez befolyásolhatja az internetes erőforrás sebességét. Ezért a legtöbb webhelytulajdonos megpróbál minden változtatást közvetlenül a kódban végrehajtani, nem pedig harmadik féltől származó bővítmények segítségével. Létrehozhat egy „fel” gombot egy HTML-webhelyhez, amely minimalizálja az elhasznált erőforrásokat.
Az összes Wordpress rendszerfájl módosítása előtt biztonsági másolatot kell készítenie róluk. Ezután kövesse az összes lépést saját gomb létrehozásához a fent leírtak szerint.
A Joomla "fel" gombja
CMS A Joomla támogatja a bővítmények, például a Wordpress telepítését is. A "fel" gomb legsikeresebb változata a Joomla 3 webhelyén az oldal tetejére nevezett kiterjesztés.
Ebben a CMS-ben bármely bővítmény telepíthető az "Extension Manager" segítségével. Ehhez szüksége van:
- töltse le a bővítményt az internetről;
- kattintson a "Tallózás" gombra a bővítménykezelőben;
- válassza ki a letöltött archívumot;
- kattintson a "Letöltés" gombra, és telepítse.
Most aktiválnia kell a "Plugin Manager"-ben. Ezértebbe a szakaszba kell lépnie, meg kell keresnie a beépülő modult, és át kell állítania az állapotát "engedélyezve".
A következő lépés az összes bővítményparaméter konfigurálása ugyanabban a szakaszban, ahol meg kell találnia a bővítmény "Alapparamétereit" a jobb oldalon.
Az oldal teteje a következő funkciókkal rendelkezik:
- Futtatás/adminisztrátor – az opció engedélyezése nem csak az internetes erőforráson, hanem magán a Joomla CMS panelen is.
- Button Reveal Position – hány képpontot kell visszatekernie a felhasználónak, hogy megjelenjen a fel gomb.
- A gomb szövegének kihagyása – a szöveg jelenléte a gombon.
- Mindig felül – a webhely oldala mindig a tetejétől fogva jelenik meg. Ha horgonyokat használ az oldal egy adott helyére görgetéshez, ezt az opciót nem kell engedélyezni.
- Smooth Scroll – simábbá teszi az oldal görgetését.
- Görgetés időtartama – az az idő, amely után az oldal teljesen az elejére kerül.
- Scroll Transition – További vizuális effektusokat ad a görgetéshez.
- Transition Easing – a mozgás „gyengítése” az oldal tetejére.
- Link helye – az ikon helye. Alapértelmezés szerint a gomb a jobb alsó sarokban található.
- Stílusok használata – egyedi gombstílus, amely az alábbi mezőben állítható be. Ha negatív értékre vált, akkor az összes stílusbeállítás a webhely aktív témájából lesz átvéve.
- Link Style – egy mező a gombstílus-paraméterek megadására.
A "fel" gomb stílusának testreszabásához legalább minimálisnak kell lennieCCS ismeretek. Ellenkező esetben állítsa át az utolsó előtti paraméter értékét "No"-ra.
További fontos árnyalat, hogy az ikonon lévő szokásos felirat az angol szöveget tartalmazza: Return to Top. Ilyen szöveg nem lehet orosz nyelvű webhelyen, ezért egyszerűen tiltsa le a beépülő modul paramétereiben, vagy módosítsa oroszra.
A felirat módosításához FTP-vel vagy a tárhelybe épített fájlkezelővel lépjen a webhely szerverére. Ezután az "/administrator/language/en-GB/" könyvtárban meg kell találnia egy "en-GB.plg_system_topofthepage.ini" nevű fájlt.
A szöveg módosítása előtt módosítsa a dokumentum kódolását UTF-8-ra. Ezzel az orosz betűk normál megjelenítése lesz.
Ezután a következő sort találjuk:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Vissza a lap tetejére"" |
és módosítsa az idézőjelben lévő kifejezést oroszra. Használhat olyan kifejezéseket, mint a "Fel!", "A csúcsra!" vagy „Fel!”.
A végén el kell mentenie a módosított fájlt, és ellenőriznie kell a "fel" gombot a Joomla webhelyén.
Fel gomb az Ucoz-hoz
Az Ucoz webhely "fel" gombját kódbefecskendezéssel kell megtenni, mivel ehhez a CMS-hez nem lehet bővítményeket csatlakoztatni. Ehhez azonban nincs szükség a rendszerfájlok hosszas tanulmányozására és a szükséges sorok keresésére, csak egy kis kódot kell beilleszteni a megfelelő helyre.
A telepítéshezkötelező:
- ugrás: "Vezérlőpult -> Tervezés -> Tervezéskezelés (sablonok) -> A webhely alja;
- illessze be a szkriptet (megtalálható a projekt hivatalos webhelyén és a harmadik fél forrásaiban).
Következtetés
Ezt követően a jobb alsó sarokban megjelenik egy ikon, amely a felhasználót az oldal legtetejére helyezi.
Amint láthatja, a vissza gomb beállítása egyik CMS-hez sem volt különösebben nehéz. Használhat automatizált telepítési módot (bővítményeket) és manuálist is. Azonban továbbra is az utóbbi lehetőség a legalkalmasabb, mivel nem befolyásolja hátrányosan a webhely teljesítményét.
Használhatja a "vissza a tetejére" gombot egy HTML-webhelyhez, hogy minimalizálja a webhely erőforrásainak fogyasztását, mivel a nagyszámú bővítmény negatív hatással lehet az erőforrás teljesítményére. Egy "fel" gomb plugin nem tudja nagyban befolyásolni a webhely oldalainak betöltési idejét, de a legtöbb esetben a felhasználó legalább egy tucat plugint telepített a CMS-re. Ebben az esetben bármely bővítmény hátrányosan befolyásolhatja a webhely oldalainak teljesítményét.
