"Omheech" knop foar de side: hoe te meitsjen

Sa'n funksje, de knop "omheech" foar de side, wêrtroch it ynternet handiger boarne foar har besikers. It helpt om maklik Faar fan oeral yn de side yn 'e boppeste part. Dit is in must foar online winkels en sites mei grutte objekten dy't fereaskje in lange Skow del.

Wêrom is it nedich

Op it stuit, it grutste part fan de sites fan dizze funksje, de knop "omheech" is der net, en der is neat krityk. Mar syn brûken meie bringe in protte foardielen foar sawol it ynternet boarne en oan syn besikers.

Foardielen foar besikers

Faak, doe't de side fan it ynternet boarne wurdt swier laden bedrach fan ynformaasje, doe't de ynformaasje artikel kostet in soad romte en moatte Omleech rôlje de side mei help fan de mûs tsjil. De plus oan dit, oan 'e ein fan it artikel kin presintearje in soad kommentaar oan.

Wannear't in besiker wurdt lêzen fan in artikel yn in persoanlike ferfeelsum scrolling del in side is net oanwêzich, mar doe't de tekst kaam ta in ein en it is nedich om nei omheech, it begjint te Tyrus in bytsje. De measte minsken sille krekt te lui om te liede in lange boekrôle, en hja krekt slút de side, ynstee fan in oar kuier troch har iepen romten.

Mei help fan in knop om direkt ferpleatse nei de boppekant fan de side makket it beuzichheid op de site handiger.

Foardielen fan in ynternet boarne

Positive aspekten fan de boarne sels basearre op histoaryske faktoaren, om't it makliker om te navigearjen de side ferbetteret de gedrachsproblemen faktoaren, lykas alle besikers sille mear aktyf yn har dieden en bewege nei oare siden.

Dêrby gegevens gedrachsproblemen faktoaren fan ynfloed binne de hâlding fan alle sykmasines oan de site en lead oan ferbettere romte yn 'e sykresultaten.

Hoe te meitsjen de "omheech" knop op de webside allinnich

Wurde ûndersocht fierder. Knop te skowen oant de side ta ien fan de CMS- kinne jo altyd meitsje jo eigen troch folgjen in pear hiel simpel stappen:

• skeppen fan in ôfbylding;
• de oprjochting fan it skript;
• It meitsjen fan in knop styl;
• tafoegjen oan de side.

button image

Om heakjen de "up" op 'e side, foar in begjin nedich om sels in ikoan, as ko der op klikke, de brûker sil nei omheech de side. Jo kinne brûk meitsje ready-made opsjes, ûnder dêr't we kinne altyd kieze de meast geskikt.

Om ferbetterjen de útstrieling fan 'e knop, jim moatte om wat ferbetterings, nammentlik te meitsje in sprite, lit CSS-basearre kombinearje eftergrûnôfbyldings, sa hawwen makke in koarte animaasje.

Foar grafyske wurken, kinne jo gebrûk meitsje fan eltse bewurker. Mar it meast handige opsje is de online tsjinst Pixlr, om't der neat te downloaden en net nedich om, kinne jo brûke se direkt yn jo blêder.

Om start wurkjen yn it finster bewurker te kiezen de "Laad in eksterne ôfbylding fan jo kompjûter." As foarbyld, nim de raket ôfbylding.

As de grutte fan de selektearre ikoanen binne te grut, dan moatte jo meitsje in lytse oanpassing oan maat. Te dwaan dat, "Bewurkje", gean nei de top menu, en selektearje it fjild, en nei «Free nederlanders ...»

Njonken, neist de foto binne der spesjale stiften dy't beweging, kinne jo grutte oanpasse de ôfbylding. Om it behâld fan it aspekt ratio, kinne jo gebrûk meitsje fan de Shift toets, holding dat, je moatte bewegen de blauwe stiften. Oan 'e ein fan dizze aksjes wurdt verkregen raketten ôfbylding.

De folgjende stap - it skeppen fan in kopy fan it laach.

No moatte jo om it byld fan de nije raketten laach in bytsje. Te dwaan dat, dan sil wêze handich te brûken de ferhuzing ark, dat leit yn 'e twadde kolom fan' e lofter menu, en pylk "up" op it toetseboerd.

No jim moatte om de top byld yn swart en wyt. Dat kin dien wurde mei help fan it item "Correction" - "Tint / Sêding" út it haadmenu. Foar in komplete discoloration skúf "Sêding" moatte nimme de wearde -100. Dizze aksje sil meitsje it effekt dat de "omheech" knop sil bikeare út swart en wyt oan kleur as jo mei de mûs oer it.

De definitive touch - it fuortheljen fan oerstallige romte om de twa bylden. Om dit te dwaan, selektearje it item "Trim" út de linker menu en selektearje mar twa raketten yn in rjochthoek. Om meitsje in trimmen Perzië de Enter toets.

Om krijen in ôfbylding dêr't der tefolle romte. Jo moatte opnimme de breedte en hichte fan de ûntstiene bylden, lykas dizze gegevens sille wêze nuttich yn de folgjende stap.

Om bewarjen de needsaak om te klikke op "Triem" - "Bewarje", dêr't it liet ûnder "Myn Computer" skriuwe de namme fan it byld (allinnich it Ingelske toetseboerdyndieling), kieze de yndieling (yn dit gefal - PNG) en klik op "Ja".

Bewurkje mei it skript "omheech" knop

Skriuw in skript, yn dit gefal is it net nedich. It sil wêze mooglik te brûken in iepenbiere opsje, bringen yn guon amendeminten klear koade.

Dit sil fereaskje te downloaden eltse koade bewurker. De populêrste en ek in fergese ferzje - is Notepad ++. Nei ynstallaasje jo moatte kopiearje en plak it al dizze koade:

"> $ (dokumint) .ready (function () {$ (finster) .scroll (function () {if ($ (dit) .scrollTop ()> 0) {$ ( '# Scroller '.) fadeIn (); } else {$ (' # Scroller ') fadeOut () ;.}}); $ (' # Scroller ') klik (function () {$ (.' liif, html '). animate ({scrollTop: 0}, 400); return false;}); });

Klik dan op de boppeste menu "Triem" - "Bewarje as ...", en dan bewarje de koade yn de .js formaat. Jo kinne dan brûk meitsje fan dizze koade op jo site troch opladen in skript en ôfbylding triemmen mei help fan FTP-ferbinings.

Ynstallaasje on site

Om de boekrôle knop omheech foar de side, moatst om de koade yn de winske lokaasje. Inscribe it moat wêze foardat de tag .

It meitsjen fan in knop styl mei CSS

Meast faak, de "omheech" knop foar in side leit oan de ûnderkant ( "kelder").

De site style.css triem, moatte jo tafoegje de folgjende koade:

"/ * Knop oan de top * / .scrollTop { background: url ( 'images / up.png ') 0 0 no-repeat; / * onositelny paad nei de ôfbylding * / width: 39px; / * breedte fan in knop * / height: 96px; / * 50% fan de hichte fan 'e knop * / bottom: 5px; / * in fêste posysje fan bottom marzje * / lofts: 89%; / * offset nei links * / } .scrollTop: Hover {background-posysje: 0 -108px; } / * Offset de eftergrûn * / "

Yn dit gefal, de gegevens nedich en de breedte en de hichte fan it byld. It allinne bliuwt te fier dan de gegevens yn de koade, en de "omheech" knop foar de side sil wêze klear! Wat oars?

"Omheech" knop om in side op Wordpress

Foar dizze CMS- knop "omheech" kin dien wurde mei help fan de plug-ins, likegoed as selsstannich.

Metoade Plugins meast handige en maklik te ynstallearjen, om't it soe nedich allinne in klik op de install knop en ynstelle al de funksjonaliteit fan de plugin menu.

By de kar fan de lêste is te benaderjen mei foarsichtigens, want mei kinst maklik krije it firus op 'e site. De populêrste en bewezen opsje - in plug-in neamd Scroll Back To Top. Jo kinne download it mei help fan de standert sykjen Wordpress ynstekkers.

Dizze tafoeging hat meardere funksjonaliteit, en is hiel maklik te individualize de "up" knop foar in side op Wordpress. Alle wearden feroaring net needsaaklik moatte ynstelle allinne it type en lokaasje fan 'e knop op de webside.

Sa't jo sjen kinne, de ynstallaasje fan de "up" knop mei help fan de plug-ins is hiel simpel. Mar der is ien wichtige caveat, dy't bestiet yn it feit dat elke ynstallearre plug-in laden wurde de CMS. Dit kin gefolgen hawwe de snelheid fan it ynternet boarne. Dêrom measte fan de webstee-eigners besykje te fieren út alle feroarings direkt yn 'e koade, ynstee fan mei help fan tredde partijen oansette. Jo kinne meitsje op de knop "omheech" foar de side oan HTML, dy't minimalisearje de middels fortard.

Foardat feroarjen gjin systeem Wordpress triemmen, moatte jo meitsje se omheech. Dan kinne jo folgje alle stappen te meitsjen jo knoppen, beskreaun hjirboppe.

Knock "up" foar Joomla

CMS Joomla ek stipet de ynstallaasje fan de plug-ins lykas Wordpress. De meast suksesfolle opsje "up" knop foar in side op Joomla 3 is in plug-in neamd Boppekant Side.

Dit CMS- fan in plug-in kinne ynstallearre wurde fia de "Tafoegings Manager". Dat giet sa:

• download de plugin op it ynternet;
• klik op de "Blêdzje" knop yn it ferlingde behearder;
• selektearje de ynladen triem;
• klik "Download" en ynstallearje.

No moatte jo aktivearje it yn de "Plugin behearder". Om do dit, moatte jo gean nei dizze paragraaf, fine de plug en wikselje syn status oan "ynskeakele."

Neist is de ynstelling fan de útwreiding opsjes mei de help fan 'e selde paragraaf, dêr't je moatte fine de "Basis parameters" diel fan dizze plugin oan de rjochterkant.

Top fan de side hat de folgjende funksjes:

• Utfiere yn / behearder - mooglik meitsjen fan de opsje net allinne op in ynternet boarne, mar ek yn it paniel CMS Joomla.
• Knop Reveal Posysje - hoefolle piksels moatte Fluch tebek de brûker mei de knop "omheech" dêr.
• Omit Knop Text - De tekst fan 'e knop.
• Altyd at Top - Site alle tiid sil werjûn út syn begjin. As jo de "ankers" om skowen nei in spesifike lokaasje op 'e side, dizze opsje net hoecht te aktivearre wurde.
• Smooth Scroll - makket de side boekrôle flotter.
• Scroll Duration - tiid wêrnei de side is hielendal ferhuze nei de top.
• Scroll Trans - Heakket scrolling troch grutte fisuele effekten.
• Oergong soene fersêftsjende - «ferswakking" move oan de boppekant fan de side.
• Link Lokaasje - lokaasje ikoanen. As standert, de knop leit yn de hoek rjochts ûnder.
• Brûk Styles - yndividueel styl knoppen, dy't spesifisearre wurde yn it fjild hjirûnder. As jo oerskeakele nei in negative wearde, alle parameter fan stilen sille nommen út it aktive tema site.
• Link Style - fjild foar it ynfieren fan jo ynstellings knop styl.

Self-tuning "omheech" knop styl, dan moatte jo op syn minst sa min mooglik kennis fan CCS. Oars, moatst yn 'e wearde fan' e foarlêste parameter oan "No".

Ien wichtiger ding is dat de gebrûklike ynskripsje op it ikoan befettet in Ingelske tekst: Gean werom nei boppen. Op de Russyske site ferlykbere tekst kin net oanwêzich wêze, dus jo moatte gewoan skeakeljen it yn de plugin parameters te feroarjen neat oan de Russyske.

Om feroarjen de kaartsjes moatte gean nei de side tsjinner mei help fan de ynboude FTP tsjinner of hosting file manager. Neist in de triemtafel «/ administrator / taal / fy-NL /» moatte finen in triem neamd «en-GB.plg_system_topofthepage.ini».

Foardat feroarjen de tekst moat wizigjen de kodearring fan it dokumint oan UTF-8. Dit soarget dat de normale werjefte fan Russyske letters.

Folgjende, fine wy de folgjende rigel:

"PLG_SYS_TOPOFTHEPAGE_GOTOTOP =" Werom nei de Top " "

en feroarje de sin yn quotation markearrings yn de Russyske taal. Jo kinne brûk meitsje fan phrases lykas "omheech", "Begjin!" Of "Up!".

Oan 'e ein fan de needsaak om te bewarjen mei de feroare ôfbylding en kontrolearje de knoppen "up" foar de side op Joomla.

"Omheech" knop foar UcoZ

"Omheech" knop om in side op UcoZ hawwe te krijen mei de ynfiering fan 'e koade, sûnt de ferbining plug foar dizze CMS is ûnmooglik. Lykwols, dit net nedich in lange tiid te learen it systeem triemmen en sykje foar nedich line hoecht mar ynstekke in lytse koade yn de winske lokaasje.

Foar de ynstallaasje, wy moatte:

• gean nei "Control Panel -> Design -> Design management (sjabloanen) -> ûnderste diel fan de side;
• Ynfoegje skript (is te finen op de offisjele projekt website en tredde partijen middels).

konklúzje

Dêrnei, yn 'e legere rjochter hoeke fan it byldkaike sil ferskine, ferpleatsen de brûker nei it heechste punt fan de side.

Sa't is sjoen, de ynstallaasje fan 'e "omheech" knop foar ien fan de CMS- wie net bysûnder dreech. It kin brûkt wurde as in automatysk metoade fan ynstallaasje (plug-ins), en hânlieding. Lykwols, dat lêste opsje is de meast geskikte, as it net negative ynfloed op de prestaasjes fan de side.

Jo kinne brûk meitsje fan de "omheech" foar de side oan HTML, te beheinen resource konsumpsje site, as in grut oantal útwreidings meie hawwe in negative ynfloed op de prestaasjes fan 'e boarne. In plug-in knop "up" sil net sterk beynfloedzje it load tiid fan siden, mar yn de measte gefallen de brûker is oanwêzich op syn minst in stik as tsien plug-ins ynstallearre op de CMS. Yn dit gefal, eltse ynstekker kin negative ynfloed op de prestaasjes fan dyn siden.