En slik funksjon som "opp"-knappen for nettstedet gjør Internett-ressursen mer praktisk for de besøkende. Det hjelper deg enkelt å flytte fra hvor som helst på siden til toppen av siden. Dette er et must for nettbutikker og nettsteder med store artikler som krever lang nedrulling.
Hva er det for
For øyeblikket har ikke de fleste nettsteder en funksjon som en "opp"-knapp, og det er ikke noe kritisk i dette. Men bruken av den kan gi mange fordeler både for Internett-ressursen og for besøkende.
Fordel for besøkende
Det skjer ofte når siden til en Internett-ressurs er tungt lastet med informasjon, når en informasjonsartikkel tar mye plass og du må rulle nedover siden med musehjulet. I tillegg til dette kan det være mange kommentarer på slutten av artikkelen.
Når en besøkende leser en artikkel, er det ikke noe kjedelig ved å rulle nedover siden, men når teksten har kommet til slutten og du må opp, begynner det å bli litt slitsomt. De fleste vil rett og slett være for late til å bla i lang tid, og de vil ganske enkelt stenge nettstedet, i stedet for å ta en ny tur rundt i dens vidder.
Bruk av knappenå umiddelbart flytte til toppen av siden gjør det mer praktisk å bruke tid på nettstedet.
Fordel for Internett-ressursen
Det positive for selve ressursen kommer fra tidligere faktorer, ettersom enklere nettstednavigering forbedrer atferdsfaktorer ettersom alle besøkende vil være mer aktive i handlingene sine og flytte til andre sider.
Disse atferdsfaktorene påvirker altså holdningen til alle søkemotorer til nettstedet og fører til en forbedring av plasseringen i søkeresultatene.
Hvordan lage "opp"-knappen på siden selv
Behandler videre. Du kan alltid lage en rulle opp-knapp for et nettsted på et hvilket som helst CMS selv ved å følge noen få ekstremt enkle trinn:
- bildeoppretting;
- oppretter et manus;
- opprett knappstil;
- legger til nettstedet.
Knappbilde
For å legge til en "opp"-knapp på siden, må du først lage selve ikonet, når du klikker, vil brukeren gå til toppen av siden. For å gjøre dette kan du bruke ferdige alternativer, blant dem kan du alltid velge det som passer best.
For å forbedre utseendet til knappen må vi gjøre noen forbedringer, nemlig å lage en sprite som lar oss kombinere bakgrunnsbilder basert på CSS, og dermed lage en animasjon ut av dem.
For grafiske arbeider kan du bruke hvilken som helst editor. Men det mest praktiske alternativet ville være en online tjeneste. PIXLR, siden det ikke er noe å laste ned her, og du kan bruke det direkte i nettleseren din.
For å komme i gang, velg "Last opp bilde fra datamaskin"-feltet i redigeringsvinduet som vises. La oss ta bildet av en rakett som et eksempel.
Hvis dimensjonene til det valgte ikonet er for store, må du foreta en liten størrelsesjustering. For å gjøre dette, gå til toppmenyen og velg "Rediger"-feltet, og etter "Free transform …"
Deretter vises spesielle markører ved siden av bildet, bevegelige som du kan endre størrelsen på bildet. For å opprettholde proporsjoner kan du bruke Shift-tasten, og holde nede som du trenger for å flytte de blå markørene. På slutten av disse trinnene får du et bilde av en rakett.
Neste trinn er å lage en kopi av laget.
Nå må du flytte bildet av raketten fra det nye laget litt opp. For å gjøre dette vil det være praktisk å bruke flytteverktøyet, som er plassert i den andre kolonnen i venstremenyen, og pil opp på tastaturet.
Nå må vi gjøre det øverste bildet svart-hvitt. Dette kan gjøres ved å bruke elementet "Korreksjon" - "Farge/metning" i toppmenyen. For fullstendig desaturasjon bør Metning-glidebryteren settes til -100. Denne handlingen lar deg lage en effekt der "Opp"-knappen endres fra svart-hvitt til farge når du holder musepekeren over den.
Den siste detaljen er fjerning av ekstra plass rundt de to bildene. For å gjøre dette, velg "Beskjær"-elementet fra venstremenyen ogvi velger bare to raketter i et rektangel. For å utføre beskjæring, trykkes Enter-tasten.
Resultatet er et bilde der det ikke er ekstra ledig plass. Du må skrive ned bredden og høyden på det resulterende bildet, siden disse dataene vil være nyttige i neste trinn.
For å lagre må du klikke på "Fil" - "Lagre", der vi i venstre avsnitt "Min datamaskin" skriver navnet på bildet (kun den engelske layouten), velg formatet (i denne store og små bokstaver, PNG) og klikk på "Ja"-knappen.
Fil med skriptet til "opp"-knappen
Du trenger ikke skrive et manus i dette tilfellet. Det vil være mulig å bruke den offentlige versjonen, noe som gjør noen endringer i den ferdige koden.
For å gjøre dette, må du laste ned et hvilket som helst koderedigeringsprogram. Det mest populære og også gratis alternativet er Notepad++. Etter at du har installert den, må du kopiere og lime inn all denne koden:
| $(document).ready(function(){ $(window).scroll(function () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} ellers {$('scroller').fadeOut();}}); $('scroller').click(function () {$('body, html').animate({scrollTop: 0}, 400); return false;}); }); |
Deretter klikker du i toppmenyen "Fil" - "Lagre som …", deretter lagrer vi koden i.js-format. Etter det kan du bruke denne koden på nettstedet ditt ved å laste opp skriptfilene og bildene til den ved å bruke en FTP-tilkobling.
Installer på stedet
For å angi rulle opp-knappen for nettstedet, må du legge innnødvendig stedskode. Du må skrive den inn før taggen.
Opprette en knappestil med CSS
Oftest er "opp"-knappen for nettstedet plassert nederst ("bunntekst").
Følgende kode må legges til nettstedets style.css-fil:
|
/Opp-knapp/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/native image path/ width:39px;/ button width/ height:96px;/50% button height/ bottom:5px;/bunnpolstring i fast posisjon/ venstre:89%;/skift til venstre/ }.scrollTop:hover{ background-position:0 -108px; } /bakgrunnsforskyvning/" |
I dette tilfellet vil disse bildebredde- og høydedataene være nødvendige. Det gjenstår bare å legge inn de mottatte dataene i koden, og "opp" -knappen for nettstedet vil være klar! Hva annet?
Opp-knapp for Wordpress-nettsted
For dette CMS kan "Opp"-knappen lages ved hjelp av plugins, så vel som uavhengig.
Plugins-metoden er den mest praktiske og enkle å installere, siden den bare krever at du klikker på installeringsknappen og konfigurerer all funksjonalitet i plugin-menyen.
Valget av sistnevnte bør behandles med forsiktighet, siden det med det vil være lett å få et virus på nettstedet. Det mest populære og velprøvde alternativet er en plugin k alt Scroll Back To Top. Du kan laste den ned ved å bruke standardsøk etter Wordpress-plugins.
Denne utvidelsen harflere funksjoner, og det vil være veldig enkelt å tilpasse "opp"-knappen for en Wordpress-side. Det er ikke nødvendig å endre alle verdier i det hele tatt, du trenger bare å konfigurere utseendet og plasseringen av knappen på siden.
Som du kan se, er det veldig enkelt å sette opp opp-knappen med plugins. Men det er en viktig nyanse, som er at hver installert plugin laster CMS. Dette kan påvirke hastigheten til Internett-ressursen. Det er derfor de fleste nettstedeiere prøver å gjøre alle endringer direkte i koden, og ikke ved hjelp av tredjepartsutvidelser. Du kan lage en "opp"-knapp for et HTML-nettsted, som vil minimere ressursforbruket.
Før du endrer alle Wordpress-systemfiler, må du sikkerhetskopiere dem. Deretter kan du følge alle trinnene for å lage din egen knapp, beskrevet ovenfor.
Knapp "opp" for Joomla
CMS Joomla støtter også installasjon av plugins, som Wordpress. Den mest vellykkede versjonen av "opp"-knappen for et nettsted på Joomla 3 er en utvidelse k alt Top of the Page.
I dette CMS kan alle plugin-moduler installeres gjennom "Extension Manager". For dette trenger du:
- last ned programtillegget på Internett;
- klikk på "Bla gjennom"-knappen i utvidelsesbehandlingen;
- velg nedlastet arkiv;
- klikk på "Last ned" og installer.
Nå må du aktivere den i "Plugin Manager". For dettedu må gå til denne delen, finne plugin-en og bytte statusen til "aktivert".
Neste trinn er å konfigurere alle utvidelsesparametrene ved å bruke samme seksjon der du må finne "Grunnleggende parametere" til denne plugin-modulen på høyre side.
Topp på siden har følgende funksjonalitet:
- Kjør inn/ administrator - aktiverer alternativet ikke bare på Internett-ressursen, men også i selve Joomla CMS-panelet.
- Button Reveal Position - hvor mange piksler brukeren må spole tilbake for at opp-knappen skal vises.
- Utelat knapptekst - tilstedeværelsen av tekst på knappen.
- Alltid på toppen – siden vil alltid vises fra toppen. Når du bruker ankere til å rulle til et bestemt sted på siden, trenger ikke dette alternativet å være aktivert.
- Smooth Scroll – gjør siderullingen jevnere.
- Rullevarighet – tiden etter at siden flyttes helt til begynnelsen.
- Scroll Transition – Legger til flere visuelle effekter ved rulling.
- Transition Easing - "svekker" bevegelsen til toppen av siden.
- Link Location - plasseringen av ikonet. Som standard er knappen plassert i nedre høyre hjørne.
- Bruk stiler – individuell knappestil, som kan angis i feltet nedenfor. Hvis du bytter til en negativ verdi, vil alle stilinnstillinger bli hentet fra det aktive temaet på nettstedet.
- Link Style - et felt for å angi knappestilparametere.
For å tilpasse stilen til "opp"-knappen, må du ha minst minimalCCS kunnskap. Ellers bør du bytte verdien til den nest siste parameteren til "Nei".
En annen viktig nyanse er at den vanlige inskripsjonen på ikonet inneholder den engelske teksten: Return to Top. Slik tekst kan ikke være til stede på et russiskspråklig nettsted, så du bør ganske enkelt deaktivere det i plugin-parametrene eller endre det til russisk.
For å endre denne inskripsjonen, må du gå til nettstedets server ved å bruke FTP eller filbehandleren innebygd i hostingen. Deretter må du i katalogen "/administrator/language/en-GB/" finne en fil k alt "en-GB.plg_system_topofthepage.ini".
Før du endrer teksten, bør du endre kodingen av dette dokumentet til UTF-8. Dette vil gjøre normal visning av russiske bokstaver.
Deretter finner vi følgende linje:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Tilbake til toppen"" |
og endre frasen i anførselstegn til russisk. Du kan bruke setninger som "Opp!", "Til toppen!" eller «Opp!».
På slutten må du lagre den endrede filen og se etter "opp"-knappen for nettstedet på Joomla.
Opp-knapp for Ucoz
Opp-knappen for nettstedet på Ucoz må gjøres med kodeinjeksjon, siden det er umulig å koble til plugins for dette CMS. Dette krever imidlertid ikke en lang studie av systemfilene og søk etter de nødvendige linjene, du trenger bare å lime inn en liten kode på rett sted.
For å installere ossobligatorisk:
- gå til "Kontrollpanel -> Design -> Design Management (maler) -> Nederst på nettstedet;
- sett inn skriptet (finnes på den offisielle nettsiden til prosjektet og tredjepartsressurser).
Konklusjon
Etter det vil et ikon vises i nedre høyre hjørne som flytter brukeren helt til toppen av siden.
Som du kan se, var det ikke spesielt vanskelig å sette opp tilbakeknappen for noen av CMSene. Du kan bruke både en automatisert installasjonsmetode (plugins) og en manuell. Det siste alternativet er imidlertid fortsatt det mest passende, siden det ikke påvirker ytelsen til nettstedet negativt.
Du kan bruke "tilbake til toppen"-knappen for et HTML-nettsted for å minimere forbruket av nettstedsressurser, ettersom et stort antall utvidelser kan ha en negativ innvirkning på ytelsen til ressursen. Én "opp"-knapp-plugin vil ikke i stor grad kunne påvirke lastetiden til sidene, men i de fleste tilfeller har brukeren minst et dusin plugins installert på CMS. I dette tilfellet kan enhver plugin påvirke ytelsen til nettstedets sider negativt.
