Zo'n functie als de "omhoog"-knop voor de site maakt de internetbron handiger voor zijn bezoekers. Het helpt u gemakkelijk van overal op de pagina naar de bovenkant van de pagina te gaan. Dit is een must voor online winkels en sites met grote artikelen die lang naar beneden moeten scrollen.
Waar is het voor
Op dit moment hebben de meeste sites niet zo'n functie als een "omhoog"-knop, en hier is niets kritisch aan. Maar het gebruik ervan kan veel voordelen opleveren, zowel voor de internetbron als voor zijn bezoekers.
Voordeel voor bezoekers
Het gebeurt vaak wanneer de pagina van een internetbron zwaar beladen is met informatie, wanneer een informatief artikel veel ruimte in beslag neemt en u met het muiswiel naar beneden moet scrollen. Daarnaast kunnen er aan het einde van het artikel veel opmerkingen staan.
Als een bezoeker een artikel leest, is er niets vervelends aan het naar beneden scrollen op de pagina, maar als de tekst op is en je omhoog moet, begint het een beetje vermoeiend te worden. De meeste mensen zullen gewoon te lui zijn om lange tijd te scrollen, en ze zullen gewoon de site sluiten, in plaats van nog een wandeling door de uitgestrektheid te maken.
De knop gebruikenom direct naar de bovenkant van de pagina te gaan, maakt het gemakkelijker om tijd op de site door te brengen.
Voordeel voor de internetbron
De positieve punten voor de bron zelf komen van factoren uit het verleden, aangezien gemakkelijkere sitenavigatie gedragsfactoren verbetert, omdat alle bezoekers actiever zullen zijn in hun acties en naar andere pagina's zullen gaan.
Deze gedragsfactoren beïnvloeden dus de houding van alle zoekmachines ten opzichte van de site en leiden tot een verbetering van de positie in de zoekresultaten.
Hoe u de "omhoog"-knop op de site zelf kunt maken
Verder handelen. Je kunt altijd zelf een scroll-knop maken voor een site op een van de CMS door slechts een paar uiterst eenvoudige stappen te volgen:
- afbeelding maken;
- een script maken;
- maak knopstijl;
- toevoegen aan de site.
Knop afbeelding
Om een "omhoog"-knop op de site toe te voegen, moet u eerst het pictogram zelf maken, wanneer erop wordt geklikt, gaat de gebruiker naar de bovenkant van de pagina. Om dit te doen, kunt u kant-en-klare opties gebruiken, waaronder u altijd de meest geschikte kunt kiezen.
Om het uiterlijk van de knop te verbeteren, moeten we enkele verbeteringen aanbrengen, namelijk om een sprite te maken waarmee we achtergrondafbeeldingen kunnen combineren op basis van CSS, en er zo een animatie van maken.
Voor grafische werken kun je elke editor gebruiken. Maar de handigste optie zou een online service zijn. PIXLR, aangezien er hier niets te downloaden is en je het direct in je browser kunt gebruiken.
Om aan de slag te gaan, selecteert u in het editorvenster dat verschijnt het veld "Afbeelding uploaden vanaf computer". Laten we de afbeelding van een raket als voorbeeld nemen.
Als de afmetingen van het geselecteerde pictogram te groot zijn, moet u een kleine aanpassing maken. Ga hiervoor naar het hoofdmenu en selecteer het veld "Bewerken" en na "Vrije transformatie …"
Vervolgens verschijnen er speciale markeringen naast de afbeelding, die bewegen en waarmee u de grootte van de afbeelding kunt wijzigen. Om de verhoudingen te behouden, kunt u de Shift-toets gebruiken, die u ingedrukt houdt om de blauwe markeringen te verplaatsen. Aan het einde van deze stappen wordt een afbeelding van een raket verkregen.
De volgende stap is het maken van een kopie van de laag.
Nu moet je de afbeelding van de raket van de nieuwe laag een beetje naar boven verplaatsen. Om dit te doen, is het handig om het gereedschap Verplaatsen te gebruiken, dat zich in de tweede kolom van het linkermenu bevindt, en de pijl omhoog op het toetsenbord.
Nu moeten we de bovenste foto zwart-wit maken. Dit kan worden gedaan met behulp van het item "Correctie" - "Tint / Verzadiging" in het bovenste menu. Voor volledige desaturatie moet de schuifregelaar Verzadiging worden ingesteld op -100. Met deze actie kun je een effect creëren waarbij de knop "Omhoog" verandert van zwart-wit in kleur wanneer je erover beweegt.
De laatste hand is het verwijderen van extra ruimte rond de twee foto's. Om dit te doen, selecteert u het item "Bijsnijden" in het linkermenu enwe selecteren slechts twee raketten in een rechthoek. Om het bijsnijden uit te voeren, wordt op de Enter-toets gedrukt.
Het resultaat is een afbeelding waarin geen extra vrije ruimte is. U moet de breedte en hoogte van de resulterende afbeelding noteren, omdat deze gegevens nuttig zullen zijn in de volgende stap.
Om op te slaan, moet u klikken op "Bestand" - "Opslaan", waar we in de linkerparagraaf "Deze computer" de naam van de afbeelding schrijven (alleen de Engelse lay-out), het formaat selecteren (in deze case, PNG) en klik op de knop "Ja".
Bestand met het script van de "omhoog"-knop
Je hoeft in dit geval geen script te schrijven. Het zal mogelijk zijn om de openbare versie te gebruiken, door enkele wijzigingen aan te brengen in de voltooide code.
Om dit te doen, moet je een code-editor downloaden. De meest populaire en ook gratis optie is Notepad++. Nadat je het hebt geïnstalleerd, moet je al deze code erin kopiëren en plakken:
| $(document).ready(function(){ $(window).scroll(function () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} else {$('scroller').fadeOut();}}); $('scroller').click(function () {$('body, html').animate({scrollTop: 0}, 400); retourneer false;}); }); |
Klik vervolgens in het bovenste menu "Bestand" - "Opslaan als …", waarna we de code opslaan in.js-formaat. Daarna kunt u deze code op uw site gebruiken door de scriptbestanden en afbeeldingen ernaar te uploaden via een FTP-verbinding.
Installeer op locatie
Om de scroll-knop voor de site in te stellen, moet je inbenodigde plaatscode. U moet het invoeren vóór de tag.
Een knopstijl maken met CSS
Meestal bevindt de "omhoog"-knop voor de site zich onderaan ("voettekst").
De volgende code moet worden toegevoegd aan het style.css-bestand van de site:
|
/Omhoog-knop/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/native image path/ width:39px;/ knop breedte/ height:96px;/50% knop hoogte/ bottom:5px;/onderkant op vaste positie/ left:89%;/shift left/ }.scrollTop:hover{ background-position:0 -108px; } /achtergrondverschuiving/" |
In dit geval zijn die gegevens over de breedte en hoogte van de afbeelding nodig. Het blijft alleen om de ontvangen gegevens in de code in te voeren en de knop "omhoog" voor de site is klaar! Wat nog meer?
Omhoog-knop voor Wordpress-site
Voor dit CMS kan de "Omhoog"-knop zowel met plug-ins als onafhankelijk worden gemaakt.
De plug-insmethode is het handigst en gemakkelijkst te installeren, omdat u alleen op de installatieknop hoeft te klikken en alle functionaliteit in het plug-inmenu hoeft te configureren.
De keuze van de laatste moet met de nodige voorzichtigheid worden benaderd, omdat het hiermee gemakkelijk zal zijn om een virus op de site te krijgen. De meest populaire en bewezen optie is een plug-in genaamd Scroll Back To Top. U kunt het downloaden met behulp van de standaardzoekopdracht voor Wordpress-plug-ins.
Deze extensie heeftmeerdere functionaliteiten, en het zal heel gemakkelijk zijn om de "omhoog"-knop voor een Wordpress-site aan te passen. Het is niet nodig om alle waarden te wijzigen, u hoeft alleen het uiterlijk en de locatie van de knop op de sitepagina te configureren.
Zoals je kunt zien, is het instellen van de omhoog-knop met plug-ins heel eenvoudig. Maar er is één belangrijke nuance, namelijk dat elke geïnstalleerde plug-in het CMS laadt. Dit kan de snelheid van de internetbron beïnvloeden. Daarom proberen de meeste site-eigenaren alle wijzigingen rechtstreeks in de code aan te brengen, en niet met behulp van extensies van derden. U kunt een "omhoog"-knop maken voor een HTML-site, waardoor het verbruik van bronnen tot een minimum wordt beperkt.
Voordat u alle Wordpress-systeembestanden wijzigt, moet u een back-up maken. Daarna kun je alle stappen volgen om je eigen knop te maken, zoals hierboven beschreven.
Knop "omhoog" voor Joomla
CMS Joomla ondersteunt ook de installatie van plug-ins, zoals Wordpress. De meest succesvolle versie van de "omhoog"-knop voor een site op Joomla 3 is een extensie genaamd Top of the Page.
In dit CMS kan elke plug-in worden geïnstalleerd via de "Extensiebeheerder". Hiervoor heb je nodig:
- download de plug-in op internet;
- klik op de knop "Bladeren" in de extensiebeheerder;
- select gedownload archief;
- klik op "Download" en installeer.
Nu moet je het activeren in de "Plugin Manager". Voor dezeje moet naar deze sectie gaan, de plug-in zoeken en de status ervan veranderen in "ingeschakeld".
De volgende stap is om alle extensieparameters te configureren met behulp van dezelfde sectie waar u de "Basisparameters" van deze plug-in aan de rechterkant moet vinden.
Top of the Page heeft de volgende functionaliteit:
- Run in/ administrator - de optie inschakelen niet alleen op de internetbron, maar ook in het Joomla CMS-paneel zelf.
- Button Reveal Position - hoeveel pixels de gebruiker moet terugspoelen om de omhoog-knop te laten verschijnen.
- Knoptekst weglaten - de aanwezigheid van tekst op de knop.
- Altijd bovenaan - de sitepagina wordt altijd bovenaan weergegeven. Wanneer u ankers gebruikt om naar een specifieke locatie op de pagina te scrollen, hoeft deze optie niet te worden ingeschakeld.
- Smooth Scroll - laat pagina's soepeler scrollen.
- Scrollduur - de tijd waarna de pagina volledig naar het begin gaat.
- Scrollovergang - Voegt meer visuele effecten toe aan scrollen.
- Transition Easing - "verzwakking" van de beweging naar de bovenkant van de pagina.
- Link Locatie - de locatie van het pictogram. Standaard bevindt de knop zich in de rechter benedenhoek.
- Gebruik stijlen – individuele knopstijl, die kan worden ingesteld in het onderstaande veld. Als er wordt overgeschakeld naar een negatieve waarde, worden alle stijlinstellingen overgenomen van het actieve thema van de site.
- Link Style - een veld voor het invoeren van uw knopstijlparameters.
Om de stijl van de "omhoog"-knop aan te passen, moet u minimaal eenCCS kennis. Anders moet u de waarde van de voorlaatste parameter op "Nee" zetten.
Een andere belangrijke nuance is dat de gebruikelijke inscriptie op het pictogram de Engelse tekst bevat: Terug naar boven. Dergelijke tekst kan niet aanwezig zijn op een Russischtalige site, dus u moet deze eenvoudig uitschakelen in de plug-inparameters of deze wijzigen in Russisch.
Om deze inscriptie te wijzigen, moet je naar de siteserver gaan met FTP of de bestandsbeheerder die in de hosting is ingebouwd. Vervolgens moet u in de directory "/administrator/language/en-GB/" een bestand vinden met de naam "en-GB.plg_system_topofthepage.ini".
Voordat u de tekst wijzigt, moet u de codering van dit document wijzigen in UTF-8. Hierdoor wordt de normale weergave van Russische letters.
Vervolgens vinden we de volgende regel:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Terug naar boven"" |
en verander de zin tussen aanhalingstekens in Russisch. U kunt zinnen gebruiken zoals "Omhoog!", "Naar de top!" of "Omhoog!".
Aan het einde moet u het gewijzigde bestand opslaan en controleren op de "omhoog"-knop voor de site op Joomla.
Omhoog-knop voor Ucoz
De "omhoog"-knop voor de site op Ucoz moet worden gedaan met behulp van code-injectie, omdat het onmogelijk is om plug-ins voor dit CMS aan te sluiten. Dit vereist echter geen lange studie van de systeembestanden en het zoeken naar de benodigde regels, je hoeft alleen maar een kleine code op de juiste plaats te plakken.
Om ons te installerenvereist:
- ga naar "Configuratiescherm -> Ontwerp -> Ontwerpbeheer (sjablonen) -> Onderaan de site;
- voeg het script in (te vinden op de officiële website van het project en bronnen van derden).
Conclusie
Daarna verschijnt een pictogram in de rechter benedenhoek, waardoor de gebruiker helemaal bovenaan de pagina komt te staan.
Zoals je kunt zien, was het instellen van de terugknop voor een van de CMS niet bijzonder moeilijk. U kunt zowel een geautomatiseerde installatiemethode (plug-ins) als een handmatige gebruiken. De laatste optie blijft echter het meest geschikt, omdat het de prestaties van de site niet nadelig beïnvloedt.
U kunt de "terug naar boven"-knop gebruiken voor een HTML-site om het verbruik van sitebronnen te minimaliseren, aangezien een groot aantal extensies een negatieve invloed kan hebben op de prestaties van de bron. Een plug-in met een "omhoog"-knop heeft geen grote invloed op de laadtijd van de sitepagina's, maar in de meeste gevallen heeft de gebruiker minstens een dozijn plug-ins op het CMS geïnstalleerd. In dit geval kan elke plug-in de prestaties van de pagina's van de site negatief beïnvloeden.
