Die "op"-knoppie vir die webwerf: hoe om te doen

INHOUDSOPGAWE:

Die "op"-knoppie vir die webwerf: hoe om te doen
Die "op"-knoppie vir die webwerf: hoe om te doen
Anonim

So 'n funksie soos die "op"-knoppie vir die webwerf maak die internethulpbron geriefliker vir sy besoekers. Dit help jou om maklik van enige plek op die bladsy na die bokant van die bladsy te beweeg. Dit is 'n moet vir aanlynwinkels en werwe met groot artikels wat lang afblaai vereis.

Waarvoor is dit

Op die oomblik het die meeste werwe nie so 'n funksie soos 'n "op"-knoppie nie, en daar is niks krities hierin nie. Maar die gebruik daarvan kan baie voordele vir beide die internethulpbron en vir sy besoekers inhou.

Voordeel vir besoekers

Dit gebeur dikwels wanneer die bladsy van 'n internethulpbron swaar gelaai is met inligting, wanneer 'n inligtingsartikel baie spasie opneem en jy met die muiswiel af op die bladsy moet blaai. Daarbenewens kan daar aan die einde van die artikel baie opmerkings daaroor wees.

Wanneer 'n besoeker 'n artikel lees, is daar niks vermoeiend daaraan om op die bladsy af te blaai nie, maar wanneer die teks tot 'n einde gekom het en jy moet opbeweeg, begin dit 'n bietjie vermoeiend raak. Die meeste mense sal eenvoudig te lui wees om vir 'n lang tyd te blaai, en hulle sal eenvoudig die werf toemaak, in plaas daarvan om nog 'n wandeling om sy uitgestrekte te neem.

Gebruik die knoppieom onmiddellik na die bokant van die bladsy te skuif, maak dit geriefliker om tyd op die werf deur te bring.

Voordeel vir die internethulpbron

op-knoppie vir webwerf
op-knoppie vir webwerf

Die positiewe aspekte vir die hulpbron self kom van vorige faktore, aangesien makliker webwerfnavigasie gedragsfaktore verbeter aangesien alle besoekers meer aktief sal wees in hul optrede en na ander bladsye sal beweeg.

Hierdie gedragsfaktore beïnvloed dus die houding van alle soekenjins tot die webwerf en lei tot 'n verbetering in die posisie in die soekresultate.

Hoe om die "op"-knoppie op die webwerf self te maak

op-knoppie vir HTML-webwerf
op-knoppie vir HTML-webwerf

Handel verder. Jy kan altyd self 'n oprolknoppie vir 'n werf op enige van die CMS maak deur net 'n paar uiters eenvoudige stappe te volg:

  • beeldskepping;
  • skep 'n draaiboek;
  • skep knoppiestyl;
  • toevoeging tot die werf.

Knopprent

Om 'n "op"-knoppie op die werf by te voeg, moet jy eers die ikoon self maak, wanneer daarop geklik word, sal die gebruiker na die bokant van die bladsy beweeg. Om dit te doen, kan jy klaargemaakte opsies gebruik, waaronder jy altyd die geskikste een kan kies.

Om die voorkoms van die knoppie te verbeter, moet ons 'n paar verbeterings aanbring, naamlik om 'n sprite te maak wat ons toelaat om agtergrondprente gebaseer op CSS te kombineer en sodoende 'n animasie daaruit te skep.

Vir grafiese werke kan jy enige redigeerder gebruik. Maar die gerieflikste opsie sou 'n aanlyn diens wees. PIXLR, aangesien daar niks is om hier af te laai nie en jy dit direk in jou blaaier kan gebruik.

Om te begin, in die redigeervenster wat verskyn, kies die "Laai prent vanaf rekenaar op"-veld. Kom ons neem die beeld van 'n vuurpyl as 'n voorbeeld.

hoe om op te maak knoppie op webwerf
hoe om op te maak knoppie op webwerf

As die afmetings van die geselekteerde ikoon te groot is, sal jy 'n klein grootte aanpassing moet maak. Om dit te doen, gaan na die boonste kieslys en kies die "Redigeer"-veld, en na "Free transform …"

Volgende verskyn spesiale merkers langs die prent, wat beweeg wat jy die grootte van die prent kan verander. Om proporsies te handhaaf, kan jy die Shift-sleutel gebruik, hou wat jy nodig het om die blou merkers te skuif. Aan die einde van hierdie stappe word 'n beeld van 'n vuurpyl verkry.

Die volgende stap is om 'n kopie van die laag te skep.

Nou moet jy die prent van die vuurpyl van die nuwe laag af 'n bietjie opskuif. Om dit te doen, sal dit gerieflik wees om die skuifinstrument, wat in die tweede kolom van die linkerkieslys geleë is, en die op-pyltjie op die sleutelbord te gebruik.

Nou moet ons die boonste prentjie swart en wit maak. Dit kan gedoen word deur die item "Regstelling" - "Tint / Versadiging" in die boonste kieslys te gebruik. Vir volledige versadiging, moet die Saturasie-skuifbalk op -100 gestel word. Hierdie aksie sal jou toelaat om 'n effek te skep waarin die "Op"-knoppie van swart en wit na kleur sal verander wanneer jy daaroor beweeg.

Die laaste aanraking is die verwydering van ekstra spasie rondom die twee prente. Om dit te doen, kies die item "Crop" in die linkerkieslys enons kies slegs twee vuurpyle in 'n reghoek. Om te sny, word die Enter-sleutel gedruk.

Die resultaat is 'n prent waarin daar geen ekstra vrye spasie is nie. Jy sal die breedte en hoogte van die resulterende prent moet neerskryf, aangesien hierdie data nuttig sal wees in die volgende stap.

hoe om op te maak knoppie op webwerf
hoe om op te maak knoppie op webwerf

Om te stoor, moet jy op "File" - "Save" klik, waar ons in die linker paragraaf "My Computer" die naam van die prent skryf (slegs die Engelse uitleg), kies die formaat (in hierdie case, PNG) en klik die "Ja"-knoppie.

Lêer met die skrif van die "op"-knoppie

Jy hoef nie 'n draaiboek in hierdie geval te skryf nie. Dit sal moontlik wees om die publieke weergawe te gebruik, wat 'n paar wysigings aan die voltooide kode maak.

Om dit te doen, moet jy enige koderedigeerder aflaai. Die gewildste en ook gratis opsie is Notepad++. Nadat u dit geïnstalleer het, moet u al hierdie kode kopieer en plak:

$(document).ready(function(){ $(window).scroll(function () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} anders {$('scroller').fadeOut();}}); $('scroller').click(funksie () {$('body, html').animate({scrollTop: 0}, 400); gee onwaar;}); });

Volgende, klik in die boonste kieslys "File" - "Save as …", waarna ons die kode in.js-formaat stoor. Daarna kan jy hierdie kode op jou werf gebruik deur die skriflêers en beelde daarheen op te laai deur 'n FTP-verbinding te gebruik.

Installeer op werf

Om die oprolknoppie vir die werf te stel, moet jy in plaasvereiste plekkode. Jy moet dit voor die merker invoer.

Skep 'n knoppiestyl met CSS

Meestal is die "op"-knoppie vir die werf onderaan ("voetskrif") geleë.

Die volgende kode moet by die werf se style.css-lêer gevoeg word:

/Op-knoppie/

.scrollTop{

background:url('images/up.png') 0 0 no-repeat;/native image path/

width:39px;/-knoppie breedte/

hoogte:96px;/50% knoppiehoogte/

onder:5px;/ondervulling op vaste posisie/

links:89%;/skuif links/

}.scrollTop:hover{ background-position:0 -108px; } /agtergrond offset/"

In hierdie geval sal daardie beeldbreedte- en hoogtedata benodig word. Dit bly net om die ontvangde data in die kode in te voer, en die "op" -knoppie vir die webwerf sal gereed wees! Wat anders?

Op-knoppie vir Wordpress-werf

hoe om op te maak knoppie op webwerf
hoe om op te maak knoppie op webwerf

Vir hierdie CMS kan die "Op"-knoppie gemaak word deur inproppe sowel as onafhanklik te gebruik.

Die inpropmetode is die gerieflikste en maklikste om te installeer, aangesien dit net vereis dat jy op die installeerknoppie klik en al die funksionaliteit in die inpropkieslys opstel.

Die keuse van laasgenoemde moet met omsigtigheid benader word, aangesien dit maklik sal wees om 'n virus op die webwerf op te doen. Die gewildste en bewese opsie is 'n inprop genaamd Scroll Back To Top. Jy kan dit aflaai deur die standaardsoektog vir Wordpress-inproppe te gebruik.

Hierdie uitbreiding hetveelvuldige funksionaliteit, en dit sal baie maklik wees om die "op"-knoppie vir 'n Wordpress-werf aan te pas. Dit is glad nie nodig om alle waardes te verander nie, jy hoef net die voorkoms en ligging van die knoppie op die werfbladsy op te stel.

Soos jy kan sien, is dit baie maklik om die op-knoppie met inproppe op te stel. Maar daar is een belangrike nuanse, wat is dat elke geïnstalleerde inprop die CMS laai. Dit kan die spoed van die internethulpbron beïnvloed. Dit is hoekom die meeste webwerf-eienaars probeer om alle veranderinge direk in die kode aan te bring, en nie met behulp van derdeparty-uitbreidings nie. Jy kan 'n "op"-knoppie vir 'n HTML-werf maak, wat die hulpbronne wat verbruik word minimaliseer.

Voordat jy alle Wordpress-stelsellêers verander, moet jy dit rugsteun. Dan kan jy al die stappe volg om jou eie knoppie te skep, soos hierbo beskryf.

Knoppie "op" vir Joomla

op-knoppie vir joomla 3-webwerf
op-knoppie vir joomla 3-webwerf

CMS Joomla ondersteun ook die installering van inproppe, soos Wordpress. Die suksesvolste weergawe van die "op"-knoppie vir 'n webwerf op Joomla 3 is 'n uitbreiding genaamd Top of the Page.

In hierdie CMS kan enige inprop deur die "Uitbreidingsbestuurder" geïnstalleer word. Hiervoor benodig jy:

  • laai die inprop op die internet af;
  • klik op die "Blaai"-knoppie in die uitbreidingbestuurder;
  • kies afgelaaide argief;
  • kliek "Download" en installeer.

Nou moet jy dit aktiveer in die "Plugin Manager". Vir ditjy moet na hierdie afdeling gaan, die inprop vind en sy status oorskakel na "geaktiveer".

Die volgende stap is om al die uitbreidingsparameters op te stel deur dieselfde afdeling te gebruik waar jy die "Basiese parameters" van hierdie inprop aan die regterkant moet vind.

Boaan die bladsy het die volgende funksionaliteit:

  • Run in/ administrateur - aktiveer die opsie nie net op die internethulpbron nie, maar ook in die Joomla CMS-paneel self.
  • Button Reveal Position - hoeveel pieksels moet die gebruiker terugspoel sodat die op-knoppie kan verskyn.
  • Laat knoppieteks weg - die teenwoordigheid van teks op die knoppie.
  • Altyd bo - die werfbladsy sal altyd van bo af vertoon word. Wanneer ankers gebruik word om na 'n spesifieke plek op die bladsy te blaai, hoef hierdie opsie nie geaktiveer te word nie.
  • Smooth Scroll - maak bladsyblaai gladder.
  • Scroll Duration - die tyd waarna die bladsy heeltemal na die begin sal beweeg.
  • Scroll Transition - Voeg meer visuele effekte by blaai.
  • Transition Easing - "verswakking" van die beweging na die bokant van die bladsy.
  • Skakelligging - die ligging van die ikoon. By verstek is die knoppie in die onderste regterhoek geleë.
  • Gebruik style – individuele knoppiestyl, wat in die veld hieronder gestel kan word. As dit na 'n negatiewe waarde oorgeskakel word, sal alle stylinstellings van die aktiewe tema van die werf geneem word.
  • Skakelstyl - 'n veld om jou knoppiestylparameters in te voer.

Om die styl van die "op"-knoppie aan te pas, moet jy ten minste minimaal hêCCS kennis. Andersins moet jy die waarde van die voorlaaste parameter na "Nee" verander.

Nog 'n belangrike nuanse is dat die gewone inskripsie op die ikoon die Engelse teks bevat: Terug na bo. Sodanige teks kan nie op 'n Russiese-talige webwerf teenwoordig wees nie, so jy moet dit eenvoudig in die inpropparameters deaktiveer of dit na Russies verander.

Om hierdie inskripsie te verander, moet jy na die werfbediener gaan met FTP of die lêerbestuurder wat in die hosting ingebou is. Volgende, in die gids "/administrator/language/en-GB/" moet jy 'n lêer genaamd "en-GB.plg_system_topofthepage.ini" vind.

Voordat jy die teks verander, moet jy die enkodering van hierdie dokument na UTF-8 verander. Dit sal die normale vertoning van Russiese letters maak.

Volgende vind ons die volgende reël:

" PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Keer terug na bo""

en verander die frase tussen aanhalingstekens na Russies. Jy kan frases gebruik soos "Op!", "Tot bo!" of "Op!".

Aan die einde sal jy die gewysigde lêer moet stoor en kyk vir die "op"-knoppie vir die webwerf op Joomla.

Op-knoppie vir Ucoz

blaai op knoppie vir webwerf
blaai op knoppie vir webwerf

Die "op"-knoppie vir die webwerf op Ucoz sal met kode-inspuiting gedoen moet word, aangesien dit onmoontlik is om inproppe vir hierdie CMS te koppel. Dit vereis egter nie 'n lang studie van die stelsellêers en soek vir die nodige lyne nie, jy hoef net 'n klein kode op die regte plek te plak.

Om ons te installeervereis:

  • gaan na "Beheerpaneel -> Ontwerp -> Ontwerpbestuur (sjablone) -> Onderaan die webwerf;
  • voeg die skrif in (kan gevind word op die amptelike webwerf van die projek en derdeparty-hulpbronne).

Gevolgtrekking

Daarna sal 'n ikoon in die onderste regterhoek verskyn wat die gebruiker heel bo aan die bladsy beweeg.

Soos jy kan sien, was die opstel van die terugknoppie vir enige van die CMS nie besonder moeilik nie. U kan beide 'n outomatiese installasiemetode (inproppe) en 'n handmatige een gebruik. Laasgenoemde opsie bly egter die mees geskikte, aangesien dit nie die werkverrigting van die webwerf nadelig beïnvloed nie.

Jy kan die "terug na bo"-knoppie vir 'n HTML-werf gebruik om die verbruik van werfhulpbronne te minimaliseer, aangesien 'n groot aantal uitbreidings 'n negatiewe impak op die werkverrigting van die hulpbron kan hê. Een "op"-knoppie-inprop sal nie die laaityd van die werfbladsye grootliks kan beïnvloed nie, maar in die meeste gevalle het die gebruiker ten minste 'n dosyn inproppe op die CMS geïnstalleer. In hierdie geval kan enige inprop die werkverrigting van die werf se bladsye nadelig beïnvloed.

Aanbeveel: