Tlačidlo hore pre lokalitu: ako to urobiť

Funkcia, ako je tlačidlo "up" pre stránky, robí internetový zdroj vhodnejší pre svojich návštevníkov. Umožňuje ľahko sa pohybovať z ľubovoľného bodu na vrchnej strane stránky. Toto je jednoducho potrebné pre online obchody a stránky s veľkými článkami, ktoré vyžadujú dlhý posun smerom nadol.

Prečo je to potrebné

V súčasnej dobe na väčšine stránok neexistuje žiadna funkcia, ako je tlačidlo "hore" a nie je nič zlé. Ale jeho využitie môže priniesť veľa výhod tak online zdroju, ako aj jeho návštevníkom.


Výhody pre návštevníkov

Často, keď stránka online zdroj zaťažené množstvo informácií, keď článok je informatívny a veľký priestor pre posun nadol pomocou kolieska myši. Okrem toho na konci článku môže byť pre ňu veľa pripomienok. Keď návštevník prečíta článok, je ťažké posunúť sa smerom nadol, ale keď sa text skončí a musíte sa pohybovať hore, začína sa trochu unavovať. Väčšina ľudí jednoducho nosí dlhý zvitok a oni jednoducho zatvoria miesto, namiesto toho, aby prechádzali cez svoje priestory. Použitie tlačidla na okamžité presunutie do hornej časti stránky umožňuje pohodlnejšie stráviť čas na stránke.

Výhody online zdroja

Pozitívne stránky samotného zdroja sú založené na minulých faktoroch, pretože zjednodušený pohyb na mieste zlepšuje faktory správania, pretože všetkynávštevníci budú aktívnejšie vo svojich akciách a prejdú na iné stránky.


Uvedené behaviorálne faktory ovplyvňujú pomer všetkých vyhľadávačov k lokalite a vedú k zlepšeniu miesta vyhľadávania.

Ako urobiť tlačidlo "hore" na samotnom mieste

Poďme ďalej. Tlačidlo na posúvanie stránok do ktoréhokoľvek z CMS môže byť vždy vykonané samostatne, a to pomocou niekoľkých veľmi jednoduchých krokov:
  • vytváranie obrázka;
  • vytváranie skriptov;
  • vytvára štýl tlačidla;
  • pridanie na stránku.
  • Obrázok tlačidla

    Ak chcete pridať tlačidlo "up" na lokalite, musíte najprv vytvoriť ikonu samotnú, keď kliknete na ktorú stránku používate. Na to môžete použiť hotové varianty, medzi ktoré môžete vždy vybrať najvhodnejšie varianty. Ak chcete zlepšiť vzhľad tlačidla, musíte urobiť nejaké vylepšenia, a to vytvoriť skript, ktorý umožňuje CSS kombinovať obrázky pozadia, a tým vytvoriť animáciu z nich. Pre grafické práce môžete použiť ľubovoľný editor. Najvhodnejšou možnosťou je on-line služba PIXLR, pretože stahovanie nič nie je potrebné a môžete ich použiť priamo v prehliadači. Ak chcete začať pracovať v okne editora, musíte vybrať pole "Nahrať obrázok z počítača". Ako príklad použite raketový obrázok.
    Ak je veľkosť zvolenej ikony príliš veľká, musíte vykonať malé nastavenie veľkosti. Za týmto účelom prejdite do hornej ponuky a vyberte v poli "Upraviť" a po"Voľný transform". Ďalej, spolu s obrázkom sú špeciálne značky, pohybujúce sa, môžete zmeniť veľkosť obrazu. Ak chcete uložiť rozmery, použite kláves Shift a stlačením tlačidla presuňte modré značky. Na konci týchto akcií sa zobrazí raketový obrázok.
    Ďalším krokom je vytvorenie kópie vrstvy. Teraz musíte posunúť raketový obrázok z novej vrstvy trochu hore. Ak to chcete urobiť, je vhodné použiť pohyblivý nástroj umiestnený v druhom stĺpci ľavého menu a šípku nahor na klávesnici. Teraz musíte urobiť horný obrázok čiernobiely. Môžete to urobiť pomocou položky "Korekcia" - "Tón /Sýtosť" v hornej ponuke. Pre úplné odfarbenie by posuvník "Saturation" mal akceptovať hodnotu -100. To vám umožní vykonať efekt, v ktorom bude tlačidlo "Hore" premenené z čiernej a bielej na farbu, keď sa na ňom pohybuje. Posledným dotykom je odstránenie nepotrebného priestoru okolo dvoch obrázkov. Ak to chcete urobiť, zvoľte v ľavej ponuke položku "Prerezávanie" a v obdĺžniku vyberte iba dve rakety. Ak chcete vykonať prerezávanie, stlačíte kláves Enter. Objavil sa obraz, v ktorom nie je nadmerný voľný priestor. Musíte napísať hodnotu šírky a výšky výsledného obrázka, pretože tieto údaje budú užitočné v ďalšom kroku.
    Ak chcete uložiť, musíte kliknúť na "Súbor" - "Uložiť", kde vľavo "My Computer" zaznamená názov obrazu (iba anglické rozloženie), vyberte formát (v tomto prípade - PNG) Áno. "

    Súbor so skriptomtlačidlá "nahor"

    V tomto prípade nie je potrebné písať skript. Môžete použiť verejnú možnosť a zaviesť niektoré opravy do hotového kódu. Ak to chcete urobiť, stiahnite si akýkoľvek editor kódu. Najpopulárnejšia a okrem bezplatnej verzie je aj Notepad ++. Po inštalácii ho skopírovať a vložiť ho celý tento kód:



    Ďalej kliknite v pravom hornom menu "Súbor" - "uložiť ako" a potom uložiť vo formáte kódu JS. Potom môžete tento kód použiť na svojich stránkach tak, že do neho odovzdáte súbory obrázkových súborov pomocou FTP pripojenia.

    Miesto inštalácie

    Ak chcete nastaviť navigačné tlačidlá hore na mieste, aby sa zaviedol potrebný kód. Musíte ju zadať pred značku.

    tlačidlo Nový štýl v CSS

    Väčšina tlačidlo "hore" pre danú lokalitu nachádzajúce sa v spodnej časti ("suterénu"). style.css súbor miesto musí vykonať nasledujúci kód:

    "tlačidlo /* až * /{.scrollTop
    pozadia: url ('images /up.png') 0 0 no-repeat; /* onosytelnыy cesta k obrazu * /
    , šírka: 39px; /* šírka tlačidlá * /
    , výška: 96 pixelov; /* 50% výšky tlačidla * /
    spodnej časti: 5px; /* pevnej polohe priestor zospodu * /
    vľavo: 89%, /* posun k * /
    ,}
    .scrollTop ľavej: vise {pozadia polohe: 0 -108px;} /* pozadia offset * /"


    V tomto prípade budete potrebovať údaje o šírke a výške obrázka. Jediné, čo musíte urobiť, je zadanie prijatých údajov do kódu a tlačidlo "up" pre stránku bude pripravené! Čo iné?

    Tlačidlo "Up" pre stránku Wordpress

    Pre toto CMS tlačidlo "Hore" môže byť vykonané pomocou zásuvných modulov, ako aj sami.Metóda pluginu je najpohodlnejšia a ľahko sa inštaluje, pretože vyžaduje iba kliknutie na inštalačné tlačidlo a nakonfigurovanie celej funkcie v ponuke pluginov. Pred výberom druhého by ste mali byť opatrní, pretože s ním bude možné ľahko zakúpiť vírus na mieste. Najpopulárnejšou a overenou možnosťou je plugin nazvaný Scroll Back to Top. Môžete si ho stiahnuť pomocou štandardného vyhľadávania pluginov Wordpress. Toto rozšírenie má pluralitnú funkčnosť a bude veľmi ľahké individualizovať tlačidlo "up" pre stránky v aplikácii Wordpress. Nie je potrebné meniť všetky hodnoty, stačí nakonfigurovať typ a umiestnenie tlačidla na stránke stránky. Ako môžete vidieť, inštalácia tlačidla "up" s pluginy je veľmi jednoduchá. Existuje však jeden dôležitý odtieň, že každý nainštalovaný plugin načíta systém CMS. To môže mať vplyv na výkon online zdroja. Preto sa väčšina majiteľov webových stránok pokúša implementovať všetky zmeny priamo do kódu, a nie ako rozšírenia tretích strán. Môžete urobiť tlačidlo "up" pre stránky v jazyku HTML, ktoré minimalizuje spotrebované zdroje. Skôr ako zmeníte všetky súbory programu Wordpress, uistite sa, že sú zálohované. Ďalej môžete spravovať všetky kroky na vytvorenie vlastného tlačidla opísaného vyššie.

    Knop "up" pre Joomlu

    CMS Joomla tiež podporuje inštaláciu pluginov, ako napríklad Wordpress. Najúspešnejšia verzia tlačidla "hore" pre stránku na lokalite Joomla 3 je prípona nazvaná Začiatok stránky. V tomto systéme CMS môže byť každý doplnok nainštalovaný prostredníctvom nástroja SprávcaRozšírenia. " Ak to chcete urobiť, musíte:
  • stiahnuť plugin na internete;
  • Kliknite na tlačidlo Prehľadávať v Správcovi rozšírení.
  • vyberte stiahnutý archív;
  • Kliknite na "Stiahnuť" a nainštalujte ho.
  • Teraz je potrebné aktivovať funkciu "Správca doplnkov". Ak to chcete urobiť, musíte prejsť na túto časť, nájsť zásuvný modul a prepnúť jeho stav na "zapnutý". Nasleduje konfigurácia všetkých možností rozšírenia pomocou tej istej sekcie, kde musíte nájsť "Základné nastavenia" tohto doplnku na pravej strane. Začiatok stránky má nasledujúce funkcie:
  • Spustiť v /administrátorovi - Povoliť možnosť nielen na internetovom zdroji, ale aj v samotnom paneli Joomla CMS.
  • Tlačidlo odhalenia tlačidla - koľko pixelov by mal používateľ vrátiť späť, aby sa zobrazilo tlačidlo "nahor".
  • Vypnutie tlačidla textu - prítomnosť textu na tlačidle.
  • Vždy v hornej časti stránky sa vždy zobrazí od začiatku stránky. Ak používate kotvy, túto možnosť nemusíte aktivovať, ak chcete prejsť na konkrétne miesto na stránke.
  • Hladké posunutie - robí navigačné tlačidlo hladšie.
  • Dĺžka rolovania - čas, počas ktorého sa stránka úplne posunie smerom nahor.
  • Scroll Transition - pridá posúvanie na veľké vizuálne efekty.
  • Prechodové zmiernenie - "oslabenie" sa presunie do hornej časti stránky.
  • Lokalita odkazu - umiestnenie ikony. Štandardne je tlačidlo umiestnené v pravom dolnom rohu.
  • Použitie štýlov je individuálny štýl tlačidla, ktorý je možné nastaviť v nižšie uvedenom poli. Ak sa prepne na zápornú hodnotu, všetky štýly sa odoberúaktívnu tému webu.
  • Štýl odkazu je pole pre zadávanie nastavení štýlu tlačidla.
  • Ak chcete nezávisle nakonfigurovať štýl tlačidla "nahor", musíte mať aspoň minimálne znalosti CCS. V opačnom prípade je potrebné zmeniť hodnotu posledného parametra na hodnotu "Nie". Ďalšou dôležitou nuansou je, že obvyklý nápis na ikone obsahuje anglický text: Späť na začiatok. Na ruskom jazykovom webe takýto text nemôže byť, preto ho jednoducho vypnite v nastaveniach doplnku alebo ho zmeňte na ruský. Ak chcete zmeniť túto vložku, musíte sa prihlásiť na server stránok pomocou vstavaného hostingu FTP alebo správcu súborov. Ďalej musí adresár "/administrator /language /en-GB /" nájsť súbor s názvom "en-GB.plg_system_topofthepage.ini". Pred zmenou textu musíte zmeniť kódovanie tohto dokumentu na UTF-8. Toto umožní normálne zobrazenie ruských písmen. Ďalej nájdeme nasledujúci riadok:

    "PLG_SYS_TOPOFTHEPAGE_GOTOTOP =" Návrat hore "

    a zmeňte frázu v úvodzovkách v ruštine. Môžete použiť frázy ako "hore!", "Začiatok!" Alebo "hore!". Na záver je potrebné uložiť upravený súbor a skontrolovať prítomnosť tlačidla "hore" pre stránky v systéme Joomla.

    Tlačidlo "Hore" pre Ucoz

    Tlačítka "up" pre lokalitu na Ucoz budú musieť byť vykonané pomocou implementácie kódu, pretože pre tento CMS nie je možné pripojiť doplnky. Na to však nemusíte dlho skúmať systémové súbory a hľadať potrebné riadky, stačí vložiť malý kód na správne miesto. Ak chcete nainštalovať, budeme potrebovať:
  • Prejdite na ovládací panel - & gt;Zobraziť - & gt; Správa dizajnov (šablóny) - & gt; Dolná časť miesta;
  • vložte skript (nájdete na oficiálnych stránkach projektu a zdrojov tretích strán).
  • Záver

    Potom sa v pravom dolnom rohu objaví ikona, ktorá presunie užívateľa do hornej časti stránky. Ako môžete vidieť, inštalácia tlačidla "Hore" pre ľubovoľnú CMS nebola obzvlášť náročná. Môžete použiť ako automatickú inštaláciu (plug-iny), tak manuálnu. Avšak posledná možnosť zostáva najvhodnejšia, pretože nemá negatívny vplyv na výkonnosť lokality. Môžete použiť tlačidlo "up" pre stránky v jazyku HTML, aby ste maximalizovali spotrebu zdrojov lokality, pretože veľký počet rozšírení môže mať negatívny vplyv na výkonnosť zdroja. Jeden doplnok tlačidla nahor nemôže výrazne ovplyvniť čas načítania stránok stránok, ale vo väčšine prípadov má používateľ v CMS najmenej desať pluginov. V tomto prípade môže každý doplnok negatívne ovplyvniť výkonnosť stránok na stránkach.

    Súvisiace publikácie