Sivuston "ylös"-painikkeen k altainen toiminto tekee Internet-resurssista kätevämmän vierailijoilleen. Sen avulla voit helposti siirtyä mistä tahansa sivulla sivun yläreunaan. Tämä on pakollinen verkkokaupoille ja sivustoille, joilla on suuria artikkeleita, jotka vaativat pitkää vierittämistä alaspäin.
Mitä se tarkoittaa
Tällä hetkellä useimmilla sivustoilla ei ole sellaista toimintoa kuin "ylös"-painike, eikä tässä ole mitään kriittistä. Mutta sen käyttö voi tuoda monia etuja sekä Internet-resurssille että sen vierailijoille.
Etu vierailijoille
Näin tapahtuu usein, kun Internet-resurssin sivu on täynnä tietoa, kun informatiivinen artikkeli vie paljon tilaa ja sivua on rullattava alas hiiren rullalla. Tämän lisäksi artikkelin lopussa voi olla monia kommentteja siitä.
Kun vierailija lukee artikkelin, sivun alaspäin vierittämisessä ei ole mitään väsyttävää, mutta kun teksti on päättynyt ja joutuu siirtymään ylöspäin, alkaa olla vähän väsyttävää. Useimmat ihmiset ovat yksinkertaisesti liian laiskoja rullaamaan pitkään, ja he yksinkertaisesti sulkevat sivuston sen sijaan, että lähtisivät uudestaan kävelylle sen avaruudessa.
Painikkeen käyttäminensiirryt heti sivun yläosaan, mikä helpottaa ajan viettämistä sivustolla.
Etu Internet-resurssille
Resurssin positiiviset puolet tulevat menneistä tekijöistä, sillä sivustossa liikkumisen helpottaminen parantaa käyttäytymistekijöitä, koska kaikki vierailijat ovat aktiivisempia toimissaan ja siirtyvät muille sivuille.
Nämä käyttäytymiseen liittyvät tekijät vaikuttavat siis kaikkien hakukoneiden asenteeseen sivustoa kohtaan ja johtavat aseman paranemiseen hakutuloksissa.
Kuinka teet "ylös"-painikkeen sivustolle itse
Jatketaan. Voit aina luoda vierityspainikkeen sivustolle missä tahansa sisällönhallintajärjestelmässä itse noudattamalla vain muutamia erittäin yksinkertaisia ohjeita:
- kuvanluonti;
- käsikirjoituksen luominen;
- luo painikkeen tyyli;
- lisätään sivustolle.
Painikkeen kuva
Jos haluat lisätä "ylös"-painikkeen sivustolle, sinun on ensin tehtävä itse kuvake, jota klikattaessa käyttäjä siirtyy sivun yläosaan. Voit tehdä tämän käyttämällä valmiita vaihtoehtoja, joista voit aina valita sopivimman.
Painikkeen ulkonäön parantamiseksi meidän on tehtävä joitain parannuksia, nimittäin luoda sprite, jonka avulla voimme yhdistää CSS-pohjaisia taustakuvia ja luoda niistä animaation.
Graafisiin töihin voit käyttää mitä tahansa editoria. Mutta kätevin vaihtoehto olisi verkkopalvelu. PIXLR, koska täältä ei ole ladattavaa ja voit käyttää sitä suoraan selaimessasi.
Aloita valitsemalla näkyviin tulevasta muokkausikkunasta "Lataa kuva tietokoneelta" -kenttä. Otetaan esimerkkinä kuva raketista.
Jos valitun kuvakkeen mitat ovat liian suuria, sinun on tehtävä pieni kokosäätö. Voit tehdä tämän siirtymällä ylävalikkoon ja valitsemalla "Muokkaa"-kentän ja "Ilmainen muunnos…" jälkeen
Seuraavaksi kuvan viereen ilmestyvät erikoismerkit, joita liikuttamalla voit muuttaa kuvan kokoa. Mittasuhteiden säilyttämiseksi voit käyttää Shift-näppäintä, jota pidät painettuna siirtääksesi sinisiä merkkejä. Näiden vaiheiden lopussa saadaan kuva raketista.
Seuraava vaihe on luoda tasosta kopio.
Nyt sinun täytyy siirtää raketin kuvaa uudelta tasolta hieman ylöspäin. Tätä varten on kätevää käyttää siirtotyökalua, joka sijaitsee vasemman valikon toisessa sarakkeessa, ja näppäimistön ylänuolta.
Nyt meidän on tehtävä ylimmästä kuvasta mustavalkoinen. Tämä voidaan tehdä käyttämällä ylävalikon kohtaa "Korjaus" - "Sävy / kylläisyys". Täydellisen kyllästymisen poistamiseksi Saturation-liukusäätimen tulee olla -100. Tämän toiminnon avulla voit luoda tehosteen, jossa "Ylös"-painike muuttuu mustavalkoisesta värilliseksi, kun viet hiiren sen päälle.
Viimeinen silaus on ylimääräisen tilan poistaminen kahden kuvan ympäriltä. Voit tehdä tämän valitsemalla vasemmanpuoleisesta valikosta "Rajaa" javalitsemme vain kaksi rakettia suorakulmiosta. Suorita rajaus painamalla Enter-näppäintä.
Tuloksena on kuva, jossa ei ole ylimääräistä vapaata tilaa. Sinun on kirjoitettava muistiin tuloksena olevan kuvan leveys ja korkeus, koska näistä tiedoista on hyötyä seuraavassa vaiheessa.
Tallennaksesi sinun on napsautettava "Tiedosto" - "Tallenna", jossa vasemmassa kohdassa "Oma tietokone" kirjoitamme kuvan nimen (vain englanninkielinen asettelu), valitse muoto (tässä kirjainkoko, PNG) ja napsauta "Kyllä"-painiketta.
Tiedosto "ylös"-painikkeen komentosarjalla
Sinun ei tarvitse kirjoittaa käsikirjoitusta tässä tapauksessa. On mahdollista käyttää julkista versiota tekemällä joitain muutoksia valmiiseen koodiin.
Tehdäksesi tämän, sinun on ladattava mikä tahansa koodieditori. Suosituin ja myös ilmainen vaihtoehto on Notepad++. Asennuksen jälkeen sinun on kopioitava ja liitettävä kaikki tämä koodi siihen:
| $(asiakirja).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;}); }); |
Valitse seuraavaksi ylävalikosta "Tiedosto" - "Tallenna nimellä…", jonka jälkeen tallennamme koodin.js-muodossa. Sen jälkeen voit käyttää tätä koodia sivustollasi lataamalla siihen komentosarjatiedostot ja kuvat FTP-yhteyden avulla.
Asenna paikan päällä
Jos haluat asettaa sivuston vierityspainikkeen ylös, sinun on asetettava sisäänvaadittu paikkakoodi. Sinun on syötettävä se ennen tagia.
Painikkeiden tyylin luominen CSS:n avulla
Useimmiten sivuston "ylös"-painike sijaitsee alaosassa ("alatunniste").
Seuraava koodi on lisättävä sivuston style.css-tiedostoon:
|
/Ylös-painike/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/alkuperäisen kuvan polku/ width:39px;/-painike leveys/ korkeus:96px;/50 % painikkeen korkeus/ bottom:5px;/alhainen pehmuste kiinteässä asennossa/ vasen:89%;/shift vasemmalle/ }.scrollTop:hover{ background-position:0 -108px; } /taustapoikkeama/" |
Tässä tapauksessa tarvitaan kuvan leveys- ja korkeustietoja. Jää vain syöttää vastaanotetut tiedot koodiin, ja sivuston "ylös"-painike on valmis! Mitä muuta?
Ylös-painike Wordpress-sivustolle
Tässä sisällönhallintajärjestelmässä "Ylös"-painike voidaan tehdä lisäosien avulla sekä itsenäisesti.
Lisäosat-menetelmä on kätevin ja helpoin asentaa, koska se vaatii vain asennuspainikkeen napsauttamista ja kaikkien laajennusvalikon toimintojen määrittämistä.
Jälkimmäisen valintaan tulee suhtautua varoen, sillä sen avulla viruksen saa helposti sivustolle. Suosituin ja todistetuin vaihtoehto on plugin nimeltä Scroll Back To Top. Voit ladata sen käyttämällä Wordpress-laajennusten vakiohakua.
Tässä laajennuksessa onuseita toimintoja, ja "ylös"-painikkeen muokkaaminen Wordpress-sivustolle on erittäin helppoa. Kaikkia arvoja ei tarvitse muuttaa ollenkaan, sinun tarvitsee vain määrittää painikkeen ulkoasu ja sijainti sivuston sivulla.
Kuten näet, up-painikkeen määrittäminen laajennuksilla on erittäin helppoa. Mutta on yksi tärkeä vivahde, joka on, että jokainen asennettu laajennus lataa sisällönhallintajärjestelmän. Tämä voi vaikuttaa Internet-resurssin nopeuteen. Siksi useimmat sivustojen omistajat yrittävät tehdä kaikki muutokset suoraan koodiin, eivät kolmannen osapuolen laajennuksien avulla. Voit tehdä "ylös"-painikkeen HTML-sivustolle, mikä minimoi resurssien kulutuksen.
Ennen kuin muutat kaikkia Wordpress-järjestelmätiedostoja, sinun on varmuuskopioitava ne. Sitten voit luoda oman painikkeen noudattamalla kaikkia yllä kuvattuja vaiheita.
Joomlan painike "ylös"
CMS Joomla tukee myös lisäosien, kuten Wordpressin, asennusta. Joomla 3:n sivuston "ylös"-painikkeen menestynein versio on laajennus nimeltä Top of the Page.
Tässä sisällönhallintajärjestelmässä mikä tahansa laajennus voidaan asentaa "Extension Managerin" kautta. Tätä varten tarvitset:
- lataa laajennus Internetistä;
- napsauta "Selaa"-painiketta laajennusten hallinnassa;
- valitse ladattu arkisto;
- napsauta "Lataa" ja asenna.
Nyt sinun on aktivoitava se "Plugin Managerissa". Tätä vartensinun täytyy mennä tähän osioon, etsiä laajennus ja vaihtaa sen tilaksi "käytössä".
Seuraava vaihe on määrittää kaikki laajennusparametrit käyttämällä samaa osaa, josta sinun on löydettävä tämän laajennuksen "Perusparametrit" oike alta puolelta.
Sivun yläosassa on seuraavat toiminnot:
- Suorita/järjestelmänvalvoja - vaihtoehdon käyttöönotto ei vain Internet-resurssissa, vaan myös itse Joomla CMS -paneelissa.
- Button Reveal Position - kuinka monta pikseliä käyttäjän on kelattava taaksepäin, jotta ylös-painike tulee näkyviin.
- Ohita painikkeen teksti - tekstin läsnäolo painikkeessa.
- Aina ylhäällä - sivuston sivu näytetään aina ylhäältä. Kun käytät ankkureita vierittääksesi tiettyyn kohtaan sivulla, tätä vaihtoehtoa ei tarvitse ottaa käyttöön.
- Smooth Scroll - tekee sivun vierityksestä sujuvampaa.
- Scroll Duration - aika, jonka jälkeen sivu siirtyy kokonaan alkuun.
- Scroll Transition - Lisää visuaalisia tehosteita vieritykseen.
- Transition Easing – liikkeen "heikentäminen" sivun alkuun.
- Linkin sijainti - kuvakkeen sijainti. Oletuksena painike sijaitsee oikeassa alakulmassa.
- Käytä tyylejä – yksilöllinen painikkeen tyyli, joka voidaan asettaa alla olevaan kenttään. Jos vaihdetaan negatiiviseen arvoon, kaikki tyyliasetukset otetaan sivuston aktiivisesta teemasta.
- Linkin tyyli - kenttä painikkeen tyyliparametrien syöttämiseen.
Jos haluat mukauttaa "ylös"-painikkeen tyyliä, sinulla on oltava vähintään minimiCCS tietämys. Muussa tapauksessa sinun tulee vaihtaa toiseksi viimeisen parametrin arvoksi "Ei".
Toinen tärkeä vivahde on, että kuvakkeen tavallinen merkintä sisältää englanninkielisen tekstin: Return to Top. Tällaista tekstiä ei voi esiintyä venäjänkielisellä sivustolla, joten sinun tulee yksinkertaisesti poistaa se käytöstä laajennusparametreista tai muuttaa se venäjäksi.
Jos haluat muuttaa tämän merkinnän, sinun on siirryttävä sivustopalvelimelle käyttämällä FTP:tä tai isännöintiin sisäänrakennettua tiedostonhallintaa. Seuraavaksi hakemistosta "/administrator/language/en-GB/" sinun on löydettävä tiedosto nimeltä "en-GB.plg_system_topofthepage.ini".
Ennen kuin muutat tekstiä, vaihda tämän asiakirjan koodaukseksi UTF-8. Tämä tekee venäläisten kirjainten normaalista näytöstä.
Seuraavaksi löydämme seuraavan rivin:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Palaa alkuun"" |
ja muuta lainausmerkeissä oleva lause venäjäksi. Voit käyttää ilmauksia, kuten "Ylös!", "Top!" tai "Ylös!".
Lopuksi sinun on tallennettava muokattu tiedosto ja tarkistettava Joomlan sivuston "ylös"-painike.
Ylös-painike Ucozille
Ucozin sivuston "ylös"-painike on tehtävä käyttämällä koodin lisäystä, koska tämän sisällönhallintajärjestelmän laajennuksia on mahdotonta yhdistää. Tämä ei kuitenkaan vaadi pitkää järjestelmätiedostojen tutkimista ja tarvittavien rivien etsimistä, sinun tarvitsee vain liittää pieni koodi oikeaan paikkaan.
Asenna meidätvaaditaan:
- siirry "Ohjauspaneeliin -> Suunnittelu -> Suunnittelun hallinta (mallit) -> Sivuston alaosaan;
- lisää komentosarja (löytyy projektin viralliselta verkkosivustolta ja kolmannen osapuolen resursseista).
Johtopäätös
Sen jälkeen oikeaan alakulmaan ilmestyy kuvake, joka siirtää käyttäjän sivun yläosaan.
Kuten näet, paluupainikkeen asettaminen millekään CMS:lle ei ollut erityisen vaikeaa. Voit käyttää sekä automaattista asennustapaa (laajennuksia) että manuaalista asennustapaa. Jälkimmäinen vaihtoehto on kuitenkin edelleen sopivin, koska se ei vaikuta haitallisesti sivuston suorituskykyyn.
Voit käyttää "takaisin alkuun" -painiketta HTML-sivustossa sivuston resurssien kulutuksen minimoimiseksi, koska suurella määrällä laajennuksia voi olla negatiivinen vaikutus resurssin suorituskykyyn. Yksi "ylös"-painikelaajennus ei voi suuresti vaikuttaa sivuston sivujen latausaikaan, mutta useimmissa tapauksissa käyttäjällä on vähintään tusina lisäosaa asennettuna CMS:ään. Tässä tapauksessa mikä tahansa laajennus voi vaikuttaa haitallisesti sivuston sivujen suorituskykyyn.
