Kitufe cha "juu" cha tovuti: jinsi ya kufanya

Orodha ya maudhui:

Kitufe cha "juu" cha tovuti: jinsi ya kufanya
Kitufe cha "juu" cha tovuti: jinsi ya kufanya
Anonim

Kitendo kama vile kitufe cha "juu" cha tovuti hurahisisha rasilimali ya mtandao kwa wanaoitembelea. Inakusaidia kuhama kwa urahisi kutoka popote kwenye ukurasa hadi juu ya ukurasa. Hili ni la lazima kwa maduka ya mtandaoni na tovuti zilizo na makala makubwa ambayo yanahitaji kusogeza chini kwa muda mrefu.

Ni ya nini

Kwa sasa, tovuti nyingi hazina fomula kama vile kitufe cha "juu", na hakuna kitu muhimu katika hili. Lakini matumizi yake yanaweza kuleta manufaa mengi kwa rasilimali ya Mtandao na kwa wanaoitembelea.

Faida kwa wageni

Mara nyingi hutokea wakati ukurasa wa rasilimali ya Mtandao umejaa habari, wakati makala ya taarifa huchukua nafasi nyingi na inabidi usogeza chini ukurasa kwa gurudumu la kipanya. Kwa kuongezea haya, mwishoni mwa kifungu kunaweza kuwa na maoni mengi juu yake.

Mgeni anaposoma makala, hakuna kinachochosha kuhusu kunyoosha ukurasa, lakini maandishi yanapofikia mwisho na inabidi kusogezwa juu, huanza kuchosha kidogo. Watu wengi watakuwa wavivu sana kusogeza kwa muda mrefu, na watafunga tovuti kwa urahisi, badala ya kutembea tena kuzunguka eneo lake.

Kwa kutumia kitufekuhamia sehemu ya juu ya ukurasa papo hapo hurahisisha zaidi kutumia muda kwenye tovuti.

Faida kwa rasilimali ya mtandao

kitufe cha juu cha wavuti
kitufe cha juu cha wavuti

Manufaa ya nyenzo yenyewe hutokana na mambo ya awali, kadri urambazaji wa tovuti unavyoboresha vipengele vya kitabia kwani wageni wote watakuwa watendaji zaidi katika vitendo vyao na kuhamia kurasa zingine.

Kwa hivyo, vipengele hivi vya kitabia huathiri mtazamo wa injini zote za utafutaji kwenye tovuti na kusababisha uboreshaji wa nafasi katika matokeo ya utafutaji.

Jinsi ya kutengeneza kitufe cha "juu" kwenye tovuti wewe mwenyewe

kitufe cha juu cha wavuti ya html
kitufe cha juu cha wavuti ya html

Inashughulika zaidi. Unaweza kutengeneza kitufe cha kusogeza juu kwa tovuti kwenye CMS yoyote wewe mwenyewe kwa kufuata hatua chache rahisi sana:

  • uundaji wa picha;
  • kuunda hati;
  • unda mtindo wa vitufe;
  • kuongeza kwenye tovuti.

Picha ya kitufe

Ili kuongeza kitufe cha "juu" kwenye tovuti, kwanza unahitaji kutengeneza ikoni yenyewe, unapobofya, mtumiaji atasonga juu ya ukurasa. Ili kufanya hivyo, unaweza kutumia chaguo zilizopangwa tayari, kati ya ambayo unaweza kuchagua kila wakati inayofaa zaidi.

Ili kuboresha mwonekano wa kitufe, tunahitaji kufanya maboresho fulani, yaani, kufanya sprite ambayo huturuhusu kuchanganya picha za usuli kulingana na CSS, na hivyo kuunda uhuishaji kutokana nazo.

Kwa kazi za michoro, unaweza kutumia kihariri chochote. Lakini chaguo rahisi zaidi itakuwa huduma ya mtandaoni. PIXLR, kwa kuwa hakuna chochote cha kupakua hapa na unaweza kukitumia moja kwa moja kwenye kivinjari chako.

Ili kuanza, katika kidirisha cha kihariri kinachoonekana, chagua sehemu ya "Pakia picha kutoka kwenye kompyuta". Hebu tuchukue picha ya roketi kama mfano.

jinsi ya kutengeneza kitufe kwenye tovuti
jinsi ya kutengeneza kitufe kwenye tovuti

Ikiwa vipimo vya aikoni iliyochaguliwa ni kubwa mno, basi utahitaji kufanya marekebisho ya ukubwa mdogo. Ili kufanya hivyo, nenda kwenye menyu ya juu na uchague sehemu ya "Hariri", na baada ya "Badilisha bila malipo …"

Inayofuata, vialama maalum huonekana kando ya picha, vikisogea ambavyo unaweza kubadilisha ukubwa wa picha. Ili kudumisha uwiano, unaweza kutumia ufunguo wa Shift, ukishikilia ambayo unahitaji kusonga alama za bluu. Mwishoni mwa hatua hizi, picha ya roketi hupatikana.

Hatua inayofuata ni kuunda nakala ya safu.

Sasa unahitaji kusogeza picha ya roketi kutoka safu mpya juu kidogo. Ili kufanya hivyo, itakuwa rahisi kutumia zana ya kusonga, ambayo iko kwenye safu wima ya pili ya menyu ya kushoto, na kishale cha juu kwenye kibodi.

Sasa tunahitaji kufanya picha ya juu kuwa nyeusi na nyeupe. Hii inaweza kufanyika kwa kutumia kipengee "Marekebisho" - "Hue / Saturation" kwenye orodha ya juu. Kwa utelezi kamili, kitelezi cha Kueneza kinapaswa kuwekwa hadi -100. Kitendo hiki kitakuruhusu kuunda athari ambayo kitufe cha "Juu" kitageuka kutoka nyeusi na nyeupe hadi rangi unapoelea juu yake.

Mguso wa mwisho ni kuondolewa kwa nafasi ya ziada karibu na picha hizi mbili. Ili kufanya hivyo, chagua kipengee cha "Mazao" kutoka kwenye orodha ya kushoto natunachagua roketi mbili tu kwenye mstatili. Ili kutekeleza upunguzaji, kitufe cha Enter kinabonyezwa.

Tokeo ni picha ambayo hakuna nafasi ya ziada ya bure. Utahitaji kuandika upana na urefu wa picha inayotokana, kwani data hizi zitakuwa muhimu katika hatua inayofuata.

jinsi ya kutengeneza kitufe kwenye tovuti
jinsi ya kutengeneza kitufe kwenye tovuti

Ili kuhifadhi, unahitaji kubofya "Faili" - "Hifadhi", ambapo katika aya ya kushoto "Kompyuta yangu" tunaandika jina la picha (mpangilio wa Kiingereza tu), chagua umbizo (katika hili. kesi, PNG) na ubofye kitufe cha "Ndiyo".

Faili yenye hati ya kitufe cha "juu"

Huhitaji kuandika hati katika kesi hii. Itawezekana kutumia toleo la umma, kufanya marekebisho kadhaa kwenye msimbo uliokamilika.

Ili kufanya hivi, unahitaji kupakua kihariri chochote cha msimbo. Chaguo maarufu zaidi na pia cha bure ni Notepad ++. Baada ya kuisakinisha, unahitaji kunakili na kubandika msimbo huu wote ndani yake:

$(document).ready(function(){ $(window).scroll(function () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} mwingine {$('scroller').fadeOut();}}); $('scroller'). bofya(kazi () {$('body, html'). animate({scrollTop:) 0}, 400); rudisha sivyo;}); });

Inayofuata, bofya kwenye menyu ya juu "Faili" - "Hifadhi kama …", kisha tunahifadhi msimbo katika umbizo la.js. Baada ya hapo, unaweza kutumia msimbo huu kwenye tovuti yako kwa kupakia faili za hati na picha kwa kutumia muunganisho wa FTP.

Sakinisha kwenye tovuti

Ili kusanidi kitufe cha kusogeza cha juu cha tovuti, unahitaji kuwekanambari ya mahali inayohitajika. Unahitaji kuiingiza kabla ya lebo.

Kuunda Mtindo wa Kitufe kwa CSS

Mara nyingi, kitufe cha "juu" cha tovuti kiko chini ("chini").

Msimbo ufuatao lazima uongezwe kwenye faili ya mtindo.css ya tovuti:

/Kitufe cha Juu/

.scrollJuu{

background:url('images/up.png') 0 0 hakuna kurudia;/njia ya picha asili/

upana:39px;/ kitufe upana/

urefu:96px;/50% urefu wa kitufe/

chini:5px;/uviringo wa chini katika nafasi isiyobadilika/

kushoto:89%;/sogeza kushoto/

}.scrollTop:hover{ background-position:0 -108px; } /urekebishaji wa usuli/"

Katika hali hii, data hizo za upana na urefu wa picha zitahitajika. Inabakia tu kuingiza data iliyopokelewa kwenye msimbo, na kifungo cha "juu" cha tovuti kitakuwa tayari! Nini kingine?

Kitufe cha juu cha tovuti ya Wordpress

jinsi ya kutengeneza kitufe kwenye tovuti
jinsi ya kutengeneza kitufe kwenye tovuti

Kwa CMS hii, kitufe cha "Juu" kinaweza kufanywa kwa kutumia programu-jalizi, pamoja na kujitegemea.

Njia ya programu-jalizi ndiyo rahisi zaidi na rahisi kusakinisha, kwani inahitaji tu ubofye kitufe cha kusakinisha na kusanidi utendakazi wote katika menyu ya programu-jalizi.

Chaguo la mwisho linapaswa kushughulikiwa kwa tahadhari, kwani nayo itakuwa rahisi kupata virusi kwenye tovuti. Chaguo maarufu na iliyothibitishwa ni programu-jalizi inayoitwa Tembeza Rudi Juu. Unaweza kuipakua ukitumia utafutaji wa kawaida wa programu jalizi za Wordpress.

Kiendelezi hiki kinautendakazi mwingi, na itakuwa rahisi sana kubinafsisha kitufe cha "juu" kwa tovuti ya Wordpress. Sio lazima kubadilisha maadili yote hata kidogo, unahitaji tu kusanidi mwonekano na eneo la kitufe kwenye ukurasa wa tovuti.

Kama unavyoona, kusanidi kitufe cha programu-jalizi ni rahisi sana. Lakini kuna nuance moja muhimu, ambayo ni kwamba kila programu-jalizi iliyosanikishwa hupakia CMS. Hii inaweza kuathiri kasi ya rasilimali ya mtandao. Ndiyo maana wamiliki wengi wa tovuti wanajaribu kufanya mabadiliko yote moja kwa moja kwenye kanuni, na si kwa msaada wa upanuzi wa tatu. Unaweza kutengeneza kitufe cha "juu" cha tovuti ya HTML, ambacho kitapunguza rasilimali zinazotumiwa.

Kabla ya kubadilisha faili zote za mfumo wa Wordpress, unahitaji kuzihifadhi. Kisha unaweza kufuata hatua zote ili kuunda kitufe chako mwenyewe, kilichoelezwa hapo juu.

Kitufe "juu" kwa Joomla

kitufe cha juu cha tovuti ya joomla 3
kitufe cha juu cha tovuti ya joomla 3

CMS Joomla pia inasaidia usakinishaji wa programu-jalizi, kama vile Wordpress. Toleo lililofanikiwa zaidi la kitufe cha "juu" kwa tovuti kwenye Joomla 3 ni kiendelezi kinachoitwa Juu ya Ukurasa.

Katika CMS hii, programu-jalizi yoyote inaweza kusakinishwa kupitia "Kidhibiti cha Kiendelezi". Kwa hili unahitaji:

  • pakua programu-jalizi kwenye Mtandao;
  • bofya kitufe cha "Vinjari" katika kidhibiti kiendelezi;
  • chagua kumbukumbu iliyopakuliwa;
  • bofya "Pakua" na usakinishe.

Sasa unahitaji kuiwasha katika "Kidhibiti programu-jalizi". Kwa hii; kwa hiliunahitaji kwenda kwenye sehemu hii, tafuta programu-jalizi na ubadilishe hali yake kuwa "imewezeshwa".

Hatua inayofuata ni kusanidi vigezo vyote vya kiendelezi kwa kutumia sehemu sawa ambapo unahitaji kupata "Vigezo vya Msingi" vya programu-jalizi hii kwenye upande wa kulia.

Juu ya Ukurasa ina utendakazi ufuatao:

  • Endesha ndani/msimamizi - kuwezesha chaguo sio tu kwenye rasilimali ya Mtandao, bali pia kwenye paneli ya Joomla CMS yenyewe.
  • Kitufe cha Onyesha Msimamo - ni pikseli ngapi ambazo mtumiaji lazima arudishe nyuma ili kitufe cha juu kionekane.
  • Acha Maandishi ya Kitufe - uwepo wa maandishi kwenye kitufe.
  • Daima Juu - ukurasa wa tovuti utaonyeshwa kila mara kutoka juu. Unapotumia nanga ili kusogeza hadi eneo mahususi kwenye ukurasa, chaguo hili halihitaji kuwezeshwa.
  • Smooth Scroll - hurahisisha usogezaji wa ukurasa.
  • Muda wa Kusogeza - wakati ambao ukurasa utasonga kabisa hadi mwanzo.
  • Mpito wa Kusogeza - Huongeza madoido zaidi ya taswira kwenye kusogeza.
  • Kurahisisha Mpito - "kudhoofisha" harakati hadi juu ya ukurasa.
  • Mahali pa Kuunganisha - eneo la ikoni. Kwa chaguomsingi, kitufe kiko katika kona ya chini kulia.
  • Tumia Mitindo – mtindo wa vitufe mahususi, ambao unaweza kuwekwa katika sehemu iliyo hapa chini. Ikibadilishwa hadi thamani hasi, basi mipangilio yote ya mtindo itachukuliwa kutoka kwa mandhari amilifu ya tovuti.
  • Mtindo wa Kiungo - sehemu ya kuweka vigezo vya mtindo wa kitufe chako.

Ili kubinafsisha mtindo wa kitufe cha "juu", lazima uwe na angalau chacheMaarifa ya CCS. Vinginevyo, unapaswa kubadilisha thamani ya parameta ya mwisho hadi "Hapana".

Kiini kingine muhimu ni kwamba maandishi ya kawaida kwenye aikoni yana maandishi ya Kiingereza: Rudi Juu. Maandishi kama haya hayawezi kuwepo kwenye tovuti ya lugha ya Kirusi, kwa hivyo unapaswa kuizima tu katika vigezo vya programu-jalizi au uibadilishe hadi Kirusi.

Ili kubadilisha uandishi huu, unahitaji kwenda kwenye seva ya tovuti ukitumia FTP au kidhibiti faili kilichojumuishwa kwenye seva pangishi. Ifuatayo, katika saraka "/administrator/language/en-GB/" unahitaji kupata faili inayoitwa "en-GB.plg_system_topofthepage.ini".

Kabla ya kubadilisha maandishi, unapaswa kubadilisha usimbaji wa hati hii hadi UTF-8. Hii itafanya onyesho la kawaida la herufi za Kirusi.

Inayofuata tunapata laini ifuatayo:

" PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Rudi Juu""

na ubadilishe kifungu cha maneno katika alama za nukuu hadi Kirusi. Unaweza kutumia vishazi kama vile "Juu!", "Hadi juu!" au “Juu!”.

Mwishoni, utahitaji kuhifadhi faili iliyobadilishwa na kuangalia kitufe cha "juu" cha tovuti kwenye Joomla.

Kitufe cha juu cha Ucoz

kitufe cha kusogeza juu kwa tovuti
kitufe cha kusogeza juu kwa tovuti

Kitufe cha "juu" cha tovuti kwenye Ucoz kitalazimika kufanywa kwa kuingiza msimbo, kwa kuwa haiwezekani kuunganisha programu-jalizi za CMS hii. Hata hivyo, hii haihitaji utafiti mrefu wa faili za mfumo na kutafuta mistari muhimu, unahitaji tu kubandika msimbo mdogo mahali pazuri.

Ili utusakinisheinahitajika:

  • nenda kwenye "Jopo la Kudhibiti -> Muundo -> Usimamizi wa Usanifu (violezo) -> Chini ya tovuti;
  • ingiza hati (inaweza kupatikana kwenye tovuti rasmi ya mradi na rasilimali za wahusika wengine).

Hitimisho

Baada ya hapo, ikoni itaonekana kwenye kona ya chini kulia, ikimsogeza mtumiaji juu kabisa ya ukurasa.

Kama unavyoona, kusanidi kitufe cha nyuma kwa ajili ya CMS yoyote haikuwa vigumu sana. Unaweza kutumia njia ya usakinishaji kiotomatiki (plugins) na ile ya mwongozo. Hata hivyo, chaguo la mwisho linasalia kuwa linafaa zaidi, kwani haliathiri vibaya utendakazi wa tovuti.

Unaweza kutumia kitufe cha "kurudi juu" kwa tovuti ya HTML ili kupunguza matumizi ya rasilimali za tovuti, kwani idadi kubwa ya viendelezi inaweza kuwa na athari mbaya kwenye utendakazi wa rasilimali. Kitufe kimoja cha programu-jalizi hakitaweza kuathiri sana muda wa upakiaji wa kurasa za tovuti, lakini katika hali nyingi mtumiaji ana angalau programu-jalizi kadhaa zilizosakinishwa kwenye CMS. Katika hali hii, programu-jalizi yoyote inaweza kuathiri vibaya utendakazi wa kurasa za tovuti.

Ilipendekeza: