SØG

"Op" -knap til webstedet: hvordan man gør det

Denne funktion, som "op" -knappen til et websted,gør internettet ressource mere bekvemt for sine besøgende. Det hjælper til nemt at flytte fra hvor som helst på siden til toppen. Dette er bare nødvendigt for onlinebutikker og websteder med store artikler, der kræver en lang rulle ned.

Hvad er det for?

I øjeblikket på de fleste steder sådanfunktioner, ligesom "op" -knappen nej, og der er intet kritisk herom. Men brugen heraf kan bringe mange plusser både til internetressourcerne og til sine besøgende.

Fordele for besøgende

Det sker ofte når siden af ​​internetressourcerneer tungt belastet med mængden af ​​informationer, når informationsartikelen fylder meget plads, og du skal rulle ned på siden med musehjulet. Ud over dette kan der i slutningen af ​​artiklen være mange kommentarer til det.

Når en besøgende læser en artikel, intetkedeligt at rulle ned på siden er ikke, men når teksten er færdig, og det er nødvendigt at bevæge sig opad, begynder det at trætte lidt. De fleste mennesker vil simpelthen være for doven til at lede en lang rulle, og de vil bare lukke stedet, i stedet for at spadsere gennem dets udvidelser.

Brug af knappen til øjeblikkeligt at flytte til toppen af ​​siden gør tidsfordriv på stedet mere praktisk.

Fordele ved en internetressource

knappen op til siden

De positive sider for selve ressourcen kommer frafra tidligere faktorer, fordi en forenklet bevægelse på stedet forbedrer adfærdsmæssige faktorer, da alle besøgende vil være mere aktive i deres handlinger og flytte til andre sider.

Således påvirker disse adfærdsmæssige faktorer holdningen hos alle søgemaskiner til webstedet og fører til en forbedring af placeringen af ​​søgeresultaterne.

Sådan gør du knappen "op" på selve webstedet

knappen op for html site

Vi forstår yderligere. Rulle op-knappen til et websted på et af CMS kan altid gøres af dig selv, kun et par meget enkle trin:

  • skabe et billede
  • Oprettelse af et script;
  • skabe en knap stil;
  • tilføjer til webstedet.

Button billede

For at tilføje en knap "op" på siden, fordu bliver nødt til at lave ikonet selv, når du klikker, vil brugeren flytte op på siden. For at gøre dette kan du bruge færdige muligheder, blandt hvilke du altid kan vælge den mest egnede.

For at forbedre udseendet af knappen skal du foretage nogle forbedringer, nemlig at lave en sprite, som giver dig mulighed for at kombinere baggrundsbilleder på basis af CSS og derved skabe en animation fra dem.

Til grafiske værker kan du bruge enhver editor. Men den mest bekvemme løsning vil være online-tjenesten PIXLR, da du ikke behøver at downloade noget her, og du kan bruge det lige i din browser.

For at begynde at arbejde i redigeringsvinduet, der vises, skal du vælge feltet "Upload image from computer". Som et eksempel, tag billedet af raketen.

hvordan man laver en knap op på siden

Hvis størrelsen på det valgte ikon er for stort, sådu skal lave en lille justering til størrelsen. For at gøre dette skal du gå til topmenuen og vælge feltet "Rediger", og efter "Free transform ..."

Næste ved siden af ​​billedet er der speciellemarkører ved at flytte som, du kan ændre størrelsen på billedet. For at gemme proportionerne kan du bruge Shift-tasten ved at klemme den, du skal flytte de blå markører. I slutningen af ​​disse handlinger opnås billedet af raketen.

Det næste skridt er at lave en kopi af laget.

Nu skal du flytte raketbilledet fraet nyt lag lidt op. For at gøre dette vil det være bekvemt at bruge flytteværktøjet, som er placeret i den anden kolonne i venstre menu, og pilen "op" på tastaturet.

Nu skal du lave det øverste billede i sort / hvid. Dette kan gøres ved hjælp af "Correction" - "Hue / Saturation" i topmenuen. For fuld misfarvning skal glidebryderen Saturation være indstillet til -100. Denne handling vil medføre, at knappen "Op" vil skifte fra sort og hvid til farve, når du svæver det.

Den endelige berøring er fjernelsen af ​​overskydende pladsomkring to billeder. For at gøre dette skal du vælge "Beskær" elementet fra venstre menu og kun vælge to missiler i rektanglet. For at udføre beskæringen skal du trykke på Enter-tasten.

Resultatet er et billede, hvor der ikke er overskydende plads. Det vil være nødvendigt at registrere bredden og højden af ​​det resulterende billede, da disse data vil være nyttige i det næste trin.

hvordan man laver en knap op på siden

For at gemme, klik på "File" -"Gem", hvor i det venstre emne "Min computer" vi skriver ned navnet på billedet (kun engelsk layout), vælg formatet (i dette tilfælde - PNG) og klik på "Ja" knappen.

Fil med knappen op script

I dette tilfælde behøver du ikke at skrive et script. Det vil være muligt at udnytte den offentlige mulighed og foretage nogle korrektioner til den færdige kode.

For at gøre dette skal du downloade en kode redaktør. Den mest populære og gratis version er Notepad ++. Efter installationen skal du kopiere og indsætte det hele i denne kode:

<script type = "text / javascript"> $ (dokument).klar (funktion () {$ (vindue) .scroll (funktion () {hvis ($ (dette) .scrollTop ()> 0) {$ ("# scroller"). scroller "). fadeOut ();}}); $ (" # scroller "). klik (funktion () {$ (" body, html "). animate ({scrollTop: 0}, 400); return false );}); </ script>

Klik derefter på den øverste menu "File" - "Savesom ... ", så gemmer vi koden i .js-formatet. Derefter kan du bruge denne kode på dit websted, uploade scriptfilerne og billederne til den ved hjælp af en FTP-forbindelse.

Installation på stedet

For at indstille rulleknappen til webstedet skal du placere koden på den ønskede placering. Du skal indtaste det før mærket </ body>.

Oprettelse af en knapstil i CSS

Oftest er "op" -knappen til siden placeret nederst ("kælder").

I siden style.css-fil skal du indtaste følgende kode:

"/ * Op-knappen * /

.scrollTop {
baggrund: url ("images / up.png") 0 0 no-repeat; / * en simpel sti til billedet * /
bredde: 39px; / * bredde på knappen * /
højde: 96px; / * 50% af højden på knappen * /
bund: 5px; / * for en fast position, indrykket fra bunden * /
venstre: 89%; / * offset venstre * /
}
.scrollTop: svinger {baggrundsstilling: 0 -108px; } / * baggrundsforskydning * / "

I dette tilfælde har du brug for data bredde og højde af billedet. Det er kun for at indtaste dataene i koden, og "op" -knappen til siden vil være klar! Hvad mere?

Op knap til Wordpress site

hvordan man laver en knap op på siden

For dette CMS kan "Up" knappen laves ved hjælp af plug-ins, såvel som uafhængigt.

Metoden med plugins er mest bekvem og nem at installere, fordi det kun kræver klik på installeringsknappen og juster al funktionalitet i pluginmenuen.

Valget af sidstnævnte bør næres fraforsigtighed, som sammen med det vil det være muligt at nemt erhverve en virus på webstedet. Den mest populære og dokumenterede mulighed er en plug-in kaldet Scroll Back to Top. Du kan downloade det ved hjælp af standard Wordpress plugin søgning.

Denne udvidelse har flerefunktionelt, og det vil være meget nemt at individualisere "op" -knappen til webstedet på Wordpress. Alle værdier behøver ikke ændres overhovedet, du behøver kun at konfigurere udseendet og placeringen af ​​knappen på side siden.

Som du kan se, skal du sætte knappen op medplugins er meget enkel. Men der er en vigtig nuance, at hver installeret plugin indlæser CMS. Dette kan påvirke internet ressourcehastigheden. Derfor forsøger de fleste webstedsejere at udføre alle ændringerne direkte i koden, og ikke ved hjælp af tredjepartsudvidelser. Du kan gøre knappen "op" til webstedet på HTML, hvilket vil minimere de forbrugte ressourcer.

Før du ændrer alle systemfiler, skal WordPress lave deres sikkerhedskopier. Dernæst kan du følge alle trin for at oprette din egen knap, beskrevet ovenfor.

Knoka "up" for Joomla

knappen op for joomla 3

CMS Joomla understøtter også installation af plug-ins, som Wordpress. Den mest succesrige version af "op" -knappen til et websted på Joomla 3 er en udvidelse kaldet toppen af ​​siden.

I dette CMS kan enhver plug-in installeres via "Extension Manager". For at gøre dette har du brug for:

  • download plug-in på internettet
  • Klik på knappen "Gennemse" i Extension Manager;
  • vælg det downloadede arkiv;
  • klik på "Download" og installer.

Nu skal du aktivere det i "Plugin Manager". For at gøre dette, gå til dette afsnit, find plug-in og skift dets tilstand til "on".

Dernæst konfigurerer du alle udvidelsesmulighederne i samme sektion, hvor du skal finde "Grundlæggende parametre" for denne plugin på højre side.

Øverst på siden har følgende funktionalitet:

  • Kør ind / administrator - aktiver optionen ikke kun på internetressourcerne, men også i CMS Joomla selv.
  • Button Reveal Position - hvor mange pixels brugeren skal spole tilbage for at "op" -knappen kan vises.
  • Omit Button Text - Tilstedeværelsen af ​​tekst på knappen.
  • Altid øverst - siden vil blive vist hele tiden fra begyndelsen. Når du bruger ankre til at rulle til et bestemt sted på siden, behøver denne indstilling ikke være aktiveret.
  • Glat rulning - gør siden rulle glattere.
  • Scroll Duration - tiden hvorefter siden er helt flyttet til begyndelsen.
  • Scrollovergang - tilføjer rullning for gode visuelle effekter.
  • Overgangsløsning - "lettelse" flytter til toppen af ​​siden.
  • Link Placering - Placering af ikonet. Som standard er knappen placeret i nederste højre hjørne.
  • Brug Styles er en individuel knap stil, der kan indstilles i feltet nedenfor. Hvis det skiftes til en negativ værdi, bliver alle stilparametre taget fra det aktive emne på webstedet.
  • Link Style - et felt for indtastning af dine egne knapper.

For uafhængigt at justere stilen på "op" -knappen, skal du mindst have minimal viden om CCS. Ellers er det værd at skifte værdien af ​​den næstsidste parameter til "Nej".

En anden vigtig nuance er detDen sædvanlige påskrift på ikonet indeholder den engelske tekst: Tilbage til toppen. På den russisksprogede side kan sådan tekst ikke være til stede, så du skal bare deaktivere den i indstillingerne af plugin'en eller ændre den til russisk.

For at ændre denne indskrift skal du gå tilsite server ved hjælp af FTP eller filhåndtering indlejret i hosting. Derefter skal du i filen "/ administrator / language / en-GB /" finde en fil kaldet "en-GB.plg_system_topofthepage.ini".

Før du ændrer teksten, skal du ændre kodningen af ​​dette dokument til utf-8. Dette vil gøre det normale display af russiske bogstaver.

Dernæst finder vi følgende linje:

"PLG_SYS_TOPOFTHEPAGE_GOTOTOP =" Tilbage til toppen ""

og ændre sætningen i citater til russisk. Du kan bruge sætninger som "Top!", "Top!" Eller "Top!".

Til sidst skal du gemme den ændrede fil og kontrollere tilstedeværelsen af ​​op-knappen til Joomla-webstedet.

Ucoz up-knappen

rulle op-knappen til webstedet

Op-knappen til Ucoz-stedet skal udføresved hjælp af kodeinjektion, da plug-ins ikke kan tilsluttes til dette CMS. Men det tager ikke lang tid at studere filerne i systemet og søge efter de nødvendige linjer, du behøver kun at indsætte en lille kode på det rigtige sted.

Til installation skal vi bruge:

  • gå til "Kontrolpanel -> Design -> Design Management (skabeloner) -> Nederst på siden;
  • indsæt et script (findes på projektets officielle hjemmeside og tredjeparts ressourcer).

konklusion

Derefter vises et ikon i nederste højre hjørne, hvor brugeren flyttes helt til toppen af ​​siden.

Som du kan se, installeres knappen "Op" fornogen af ​​CMS var ikke særlig vanskelig. Kan bruges som en automatiseret installationsmetode (plug-ins) og manuel. Sidstnævnte mulighed er dog den mest hensigtsmæssige, da den ikke har negativ indvirkning på webstedets hastighed.

Du kan bruge op-knappen til et websted påHTML for at minimere ressourceforbruget på webstedet, da et stort antal udvidelser kan have en negativ indvirkning på ressourcens hastighed. En plug-up af "up" -knappen vil ikke kunne påvirke sidetidens læsningstid, men i de fleste tilfælde har brugeren mindst ti plug-ins installeret på CMS. I dette tilfælde kan en plugin-modul påvirke ydeevnen af ​​sider på webstedet negativt.

  • Evaluering: