Sådan en funktion som "op"-knappen til webstedet gør internetressourcen mere bekvem for dens besøgende. Det hjælper dig med nemt at flytte fra hvor som helst på siden til toppen af siden. Dette er et must for onlinebutikker og websteder med store artikler, der kræver lang rulning ned.
Hvad er det til
I øjeblikket har de fleste sider ikke sådan en funktion som en "op"-knap, og der er ikke noget kritisk i dette. Men brugen af det kan give mange fordele både for internetressourcen og for dens besøgende.
Fordel for besøgende
Det sker ofte, når en internetressources side er tungt fyldt med information, når en informativ artikel fylder meget, og du skal rulle ned på siden med musehjulet. Ud over dette kan der i slutningen af artiklen være mange kommentarer til den.
Når en besøgende læser en artikel, er der ikke noget trættende ved at scrolle ned på siden, men når teksten er slut, og du skal rykke op, begynder det at blive lidt trættende. De fleste mennesker vil simpelthen være for dovne til at scrolle i lang tid, og de vil simpelthen lukke webstedet i stedet for at tage endnu en tur rundt i dets vidder.
Brug af knappenat flytte til toppen af siden med det samme gør det mere bekvemt at bruge tid på webstedet.
Fordel for internetressourcen
Det positive for selve ressourcen kommer fra tidligere faktorer, da lettere webstedsnavigation forbedrer adfærdsfaktorer, da alle besøgende vil være mere aktive i deres handlinger og flytte til andre sider.
Disse adfærdsfaktorer påvirker således alle søgemaskiners holdning til webstedet og fører til en forbedring af placeringen i søgeresultaterne.
Sådan laver du selv knappen "op" på webstedet
Behandler yderligere. Du kan altid selv lave en rulle op-knap for et websted på et hvilket som helst CMS ved at følge nogle få meget enkle trin:
- billedeoprettelse;
- opretter et script;
- opret knapstil;
- tilføje til webstedet.
Knapbillede
For at tilføje en "op"-knap på webstedet, skal du først lave selve ikonet, når der klikkes på, vil brugeren flytte til toppen af siden. For at gøre dette kan du bruge færdige muligheder, blandt hvilke du altid kan vælge den bedst egnede.
For at forbedre udseendet af knappen skal vi lave nogle forbedringer, nemlig at lave en sprite, der giver os mulighed for at kombinere baggrundsbilleder baseret på CSS og derved skabe en animation ud af dem.
For grafiske værker kan du bruge enhver editor. Men den mest bekvemme mulighed ville være en onlinetjeneste. PIXLR, da der ikke er noget at downloade her, og du kan bruge det direkte i din browser.
For at komme i gang skal du i redigeringsvinduet, der vises, vælge feltet "Upload billede fra computer". Lad os tage billedet af en raket som eksempel.
Hvis dimensionerne af det valgte ikon er for store, skal du foretage en lille størrelsesjustering. For at gøre dette skal du gå til topmenuen og vælge feltet "Rediger", og efter "Gratis transformation …"
Dernæst vises specielle markører ved siden af billedet, der bevæger sig, som du kan ændre størrelsen på billedet. For at bevare proportionerne kan du bruge Shift-tasten, som du skal holde nede for at flytte de blå markører. I slutningen af disse trin opnås et billede af en raket.
Det næste trin er at oprette en kopi af laget.
Nu skal du flytte billedet af raketten fra det nye lag lidt op. For at gøre dette vil det være praktisk at bruge flytteværktøjet, som er placeret i anden kolonne i venstre menu, og pil op på tastaturet.
Nu skal vi gøre det øverste billede sort/hvidt. Dette kan gøres ved at bruge punktet "Korrektion" - "Hue / Saturation" i topmenuen. For fuldstændig desaturation skal skyderen Saturation indstilles til -100. Denne handling giver dig mulighed for at skabe en effekt, hvor "Op"-knappen skifter fra sort og hvid til farve, når du holder markøren over den.
Den sidste touch er fjernelse af ekstra plads omkring de to billeder. For at gøre dette skal du vælge punktet "Beskær" fra venstre menu ogvi vælger kun to raketter i et rektangel. For at udføre beskæring trykkes der på Enter-tasten.
Resultatet er et billede, hvor der ikke er ekstra ledig plads. Du skal skrive bredden og højden af det resulterende billede ned, da disse data vil være nyttige i det næste trin.
For at gemme skal du klikke på "Filer" - "Gem", hvor vi i venstre afsnit "Denne computer" skriver navnet på billedet (kun det engelske layout), vælg formatet (i dette store og små bogstaver, PNG) og klik på "Ja"-knappen.
Fil med scriptet til "op"-knappen
Du behøver ikke at skrive et script i dette tilfælde. Det vil være muligt at bruge den offentlige version, hvilket gør nogle ændringer til den færdige kode.
For at gøre dette skal du downloade en hvilken som helst kodeeditor. Den mest populære og også gratis mulighed er Notepad++. Efter installationen skal du kopiere og indsætte al denne kode i den:
| $(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;}); }); |
Næste, klik i topmenuen "Filer" - "Gem som …", hvorefter vi gemmer koden i.js-format. Derefter kan du bruge denne kode på dit websted ved at uploade scriptfilerne og billederne til det ved hjælp af en FTP-forbindelse.
Installer på stedet
For at indstille scroll-op-knappen for webstedet, skal du placere ipåkrævet stedkode. Du skal indtaste det før tagget.
Oprettelse af en knapstil med CSS
Oftest er "op"-knappen for webstedet placeret i bunden ("footer").
Følgende kode skal tilføjes til webstedets style.css-fil:
|
/Op-knap/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/native image path/ width:39px;/ button bredde/ højde:96px;/50 % knaphøjde/ bund:5px;/bundpolstring i fast position/ venstre:89%;/skift til venstre/ }.scrollTop:hover{ background-position:0 -108px; } /baggrundsforskydning/" |
I dette tilfælde vil disse billedbredde- og højdedata være nødvendige. Det er kun at indtaste de modtagne data i koden, og knappen "op" til webstedet vil være klar! Hvad ellers?
Op-knap til Wordpress-websted
For dette CMS kan "Op"-knappen laves ved hjælp af plugins, såvel som uafhængigt.
Plugins-metoden er den mest bekvemme og nemme at installere, da den kun kræver, at du klikker på installationsknappen og konfigurerer al funktionaliteten i plugin-menuen.
Valget af sidstnævnte bør behandles med forsigtighed, da det med det vil være nemt at erhverve en virus på webstedet. Den mest populære og gennemprøvede mulighed er et plugin kaldet Scroll Back To Top. Du kan downloade det ved at bruge standardsøgningen efter Wordpress-plugins.
Denne udvidelse harflere funktioner, og det vil være meget nemt at tilpasse "op"-knappen til et Wordpress-websted. Det er ikke nødvendigt at ændre alle værdier overhovedet, du behøver kun at konfigurere udseendet og placeringen af knappen på webstedets side.
Som du kan se, er det meget nemt at konfigurere op-knappen med plugins. Men der er en vigtig nuance, som er, at hvert installeret plugin indlæser CMS. Dette kan påvirke hastigheden af internetressourcen. Det er derfor, de fleste webstedsejere forsøger at foretage alle ændringer direkte i koden, og ikke ved hjælp af tredjepartsudvidelser. Du kan lave en "op"-knap til et HTML-websted, som vil minimere ressourceforbruget.
Før du ændrer alle Wordpress-systemfiler, skal du sikkerhedskopiere dem. Derefter kan du følge alle trinene for at oprette din egen knap, beskrevet ovenfor.
Knap "op" til Joomla
CMS Joomla understøtter også installation af plugins, såsom Wordpress. Den mest succesfulde version af "op"-knappen for et websted på Joomla 3 er en udvidelse kaldet Top of the Page.
I dette CMS kan ethvert plugin installeres gennem "Extension Manager". Til dette skal du bruge:
- download pluginnet på internettet;
- klik på knappen "Gennemse" i udvidelsesadministratoren;
- vælg downloadet arkiv;
- klik på "Download" og installer.
Nu skal du aktivere det i "Plugin Manager". For detdu skal gå til dette afsnit, finde plugin'et og skifte dets status til "aktiveret".
Det næste trin er at konfigurere alle udvidelsesparametrene ved hjælp af den samme sektion, hvor du skal finde "Basisparametrene" for dette plugin i højre side.
Top af siden har følgende funktionalitet:
- Kør ind/ administrator - aktiverer muligheden ikke kun på internetressourcen, men også i selve Joomla CMS-panelet.
- Button Reveal Position - hvor mange pixels skal brugeren spole tilbage for at op-knappen vises.
- Udlad knaptekst - tilstedeværelsen af tekst på knappen.
- Altid øverst - siden vil altid blive vist fra toppen. Når du bruger ankre til at rulle til en bestemt placering på siden, behøver denne mulighed ikke at være aktiveret.
- Smooth Scroll - gør siderulning nemmere.
- Rullevarighed - det tidsrum, hvorefter siden helt vil flytte til begyndelsen.
- Scroll Transition - Tilføjer flere visuelle effekter til rulning.
- Lettelse af overgange - "svækker" bevægelsen til toppen af siden.
- Linkplacering - ikonets placering. Som standard er knappen placeret i nederste højre hjørne.
- Use Styles – individuel knapstil, som kan indstilles i feltet nedenfor. Hvis der skiftes til en negativ værdi, vil alle stilindstillinger blive taget fra webstedets aktive tema.
- Link Style - et felt til at indtaste dine knapstilsparametre.
For at tilpasse stilen på "op"-knappen skal du have mindst minimalCCS viden. Ellers skal du ændre værdien af den næstsidste parameter til "Nej".
En anden vigtig nuance er, at den sædvanlige inskription på ikonet indeholder den engelske tekst: Return to Top. Sådan tekst kan ikke være til stede på et russisksproget websted, så du skal blot deaktivere det i plugin-parametrene eller ændre det til russisk.
For at ændre denne inskription skal du gå til webstedets server ved hjælp af FTP eller filhåndteringen indbygget i hostingen. Dernæst skal du i mappen "/administrator/language/en-GB/" finde en fil kaldet "en-GB.plg_system_topofthepage.ini".
Før du ændrer teksten, bør du ændre kodningen af dette dokument til UTF-8. Dette vil gøre den normale visning af russiske bogstaver.
Dernæst finder vi følgende linje:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Tilbage til toppen"" |
og skift sætningen i anførselstegn til russisk. Du kan bruge sætninger som "Op!", "Til toppen!" eller "Op!".
I slutningen skal du gemme den ændrede fil og se efter "op"-knappen for webstedet på Joomla.
Op-knap til Ucoz
Op-knappen for webstedet på Ucoz skal udføres ved hjælp af kodeinjektion, da det er umuligt at forbinde plugins til dette CMS. Dette kræver dog ikke en lang undersøgelse af systemfilerne og søg efter de nødvendige linjer, du skal blot indsætte en lille kode på det rigtige sted.
At installere ospåkrævet:
- gå til "Kontrolpanel -> Design -> Design Management (skabeloner) -> Nederst på webstedet;
- indsæt scriptet (kan findes på projektets officielle hjemmeside og tredjepartsressourcer).
Konklusion
Derefter vises et ikon i nederste højre hjørne, der flytter brugeren helt til toppen af siden.
Som du kan se, var det ikke særlig svært at konfigurere tilbage-knappen til nogen af CMS'erne. Du kan bruge både en automatiseret installationsmetode (plugins) og en manuel. Sidstnævnte mulighed forbliver dog den bedst egnede, da den ikke påvirker webstedets ydeevne negativt.
Du kan bruge knappen "tilbage til toppen" til et HTML-websted for at minimere forbruget af webstedsressourcer, da et stort antal udvidelser kan have en negativ indvirkning på ressourcens ydeevne. Et "op"-knap-plugin vil ikke være i stand til at påvirke indlæsningstiden for webstedets sider, men i de fleste tilfælde har brugeren mindst et dusin plugins installeret på CMS'et. I dette tilfælde kan ethvert plugin påvirke ydeevnen af webstedets sider negativt.
