Կայքի «վերև» կոճակի նման գործառույթն ավելի հարմար է դարձնում ինտերնետային ռեսուրսը իր այցելուների համար: Այն օգնում է ձեզ հեշտությամբ տեղափոխել էջի ցանկացած կետից էջի վերև: Սա պարտադիր է առցանց խանութների և խոշոր հոդվածներով կայքերի համար, որոնք պահանջում են երկար ոլորում դեպի ներքև:
Ինչի համար է դա
Այս պահին կայքերի մեծ մասը չունի «վերև» կոճակի գործառույթ, և դրանում ոչ մի կարևոր բան չկա։ Սակայն դրա օգտագործումը կարող է բազմաթիվ առավելություններ բերել ինչպես ինտերնետ ռեսուրսի, այնպես էլ նրա այցելուների համար։
Օգուտ այցելուների համար
Հաճախ է պատահում, երբ ինտերնետ-ռեսուրսի էջը խիստ բեռնված է ինֆորմացիայով, երբ տեղեկատվական հոդվածը շատ տեղ է զբաղեցնում, և դուք պետք է մկնիկի անիվով ոլորեք էջը ներքև: Բացի սրանից, հոդվածի վերջում կարող են լինել բազմաթիվ մեկնաբանություններ դրա վերաբերյալ։
Երբ այցելուը հոդված է կարդում, էջը ներքև պտտելը հոգնեցուցիչ ոչինչ չկա, բայց երբ տեքստը ավարտվում է, և դու պետք է բարձրանաս վերև, այն սկսում է մի փոքր հոգնեցուցիչ դառնալ: Մարդկանց մեծամասնությունը պարզապես չափազանց ծույլ կլինի երկար ժամանակ ոլորել, և նրանք պարզապես կփակեն կայքը, այլ ոչ թե նորից զբոսնեն դրա տարածքներով:
Օգտագործելով կոճակըէջի վերևում ակնթարթորեն տեղափոխվելն ավելի հարմար է դարձնում կայքում ժամանակ անցկացնելը:
Օգուտ ինտերնետ ռեսուրսի համար
Բուն ռեսուրսի դրական կողմերը գալիս են անցյալի գործոններից, քանի որ կայքի հեշտ նավարկությունը բարելավում է վարքագծային գործոնները, քանի որ բոլոր այցելուներն ավելի ակտիվ կլինեն իրենց գործողություններում և կտեղափոխվեն այլ էջեր:
Այսպիսով, այս վարքագծային գործոնները ազդում են բոլոր որոնման համակարգերի վերաբերմունքի վրա կայքի նկատմամբ և հանգեցնում են որոնման արդյունքների դիրքի բարելավմանը:
Ինչպես ինքներդ կատարել «up» կոճակը կայքում
Հետագա գործեր: Դուք միշտ կարող եք ինքներդ ոլորել վերև կոճակը կայքի համար ցանկացած CMS-ի վրա՝ հետևելով ընդամենը մի քանի չափազանց պարզ քայլերի՝
- պատկերի ստեղծում;
- սկրիպտի ստեղծում;
- ստեղծել կոճակի ոճ;
- ավելացնում է կայքում։
Կոճակի պատկեր
Կայքում «վերև» կոճակ ավելացնելու համար նախ պետք է ինքնին պատկերակը դարձնել, սեղմելուց հետո օգտատերը կտեղափոխվի էջի վերև: Դա անելու համար կարող եք օգտագործել պատրաստի տարբերակներ, որոնցից միշտ կարող եք ընտրել ամենահարմարը։
Կոճակի արտաքին տեսքը բարելավելու համար մենք պետք է որոշ բարելավումներ կատարենք, մասնավորապես՝ ստեղծել մի սփրայթ, որը թույլ կտա մեզ համատեղել ֆոնային պատկերները՝ հիմնված CSS-ի վրա՝ դրանով իսկ ստեղծելով դրանցից անիմացիա:
Գրաֆիկական աշխատանքների համար կարող եք օգտագործել ցանկացած խմբագրիչ։ Բայց ամենահարմար տարբերակը կլինի առցանց ծառայությունը։PIXLR, քանի որ այստեղ ներբեռնելու բան չկա, և դուք կարող եք այն օգտագործել անմիջապես ձեր բրաուզերում:
Սկսելու համար խմբագրիչի պատուհանում, որը երևում է, ընտրեք «Վերբեռնել պատկերը համակարգչից» դաշտը: Որպես օրինակ վերցնենք հրթիռի պատկերը։
Եթե ընտրված պատկերակի չափերը չափազանց մեծ են, ապա ձեզ հարկավոր է փոքր չափի ճշգրտում կատարել: Դա անելու համար անցեք վերին մենյու և ընտրեք «Խմբագրել» դաշտը, իսկ «Անվճար փոխակերպում …» հետո
Հաջորդում նկարի կողքին հայտնվում են հատուկ մարկերներ, որոնք շարժելով կարող եք փոխել նկարի չափը։ Համամասնությունները պահպանելու համար կարող եք օգտագործել Shift ստեղնը, որը պահելով պետք է տեղափոխել կապույտ մարկերները: Այս քայլերի վերջում ստացվում է հրթիռի պատկեր։
Հաջորդ քայլը շերտի պատճենի ստեղծումն է:
Այժմ պետք է հրթիռի նկարը նոր շերտից մի փոքր տեղափոխել վեր։ Դա անելու համար հարմար կլինի օգտագործել շարժման գործիքը, որը գտնվում է ձախ մենյուի երկրորդ սյունակում և ստեղնաշարի վերև սլաքը։
Այժմ մենք պետք է վերևի նկարը դարձնենք սև ու սպիտակ: Դա կարելի է անել՝ օգտագործելով «Ուղղում» - «Hue / Saturation» կետը վերևի ընտրացանկում: Ամբողջական չհագեցման համար Saturation սահիչը պետք է սահմանվի -100: Այս գործողությունը թույլ կտա ստեղծել էֆեկտ, որտեղ «Վեր» կոճակը սև-սպիտակից կդառնա գունավոր, երբ սավառնում եք դրա վրա:
Վերջնական հպումը երկու նկարների շուրջ լրացուցիչ տարածության հեռացումն է: Դա անելու համար ձախ մենյուից ընտրեք «Կտրել» կետը ևուղղանկյունում ընտրում ենք ընդամենը երկու հրթիռ: Կտրում կատարելու համար սեղմվում է Enter ստեղնը:
Արդյունքը պատկեր է, որում ավելորդ ազատ տարածություն չկա: Դուք պետք է գրեք ստացված պատկերի լայնությունը և բարձրությունը, քանի որ այս տվյալները օգտակար կլինեն հաջորդ քայլում:
Պահպանելու համար հարկավոր է սեղմել «Ֆայլ» - «Պահպանել» վրա, որտեղ «Իմ Համակարգիչը» ձախ պարբերությունում գրում ենք նկարի անունը (միայն անգլերեն դասավորությունը), ընտրում ենք ձևաչափը (այստեղ. պատյան, PNG) և սեղմեք «Այո» կոճակը:
Ֆայլ «վերև» կոճակի սցենարով
Այս դեպքում ձեզ հարկավոր չէ սցենար գրել: Հնարավոր կլինի օգտագործել հրապարակային տարբերակը՝ որոշ փոփոխություններ կատարելով պատրաստի ծածկագրում։
Դա անելու համար անհրաժեշտ է ներբեռնել կոդերի ցանկացած խմբագրիչ: Ամենահայտնի և նաև անվճար տարբերակը Notepad++-ն է։ Այն տեղադրելուց հետո դուք պետք է պատճենեք և տեղադրեք այս ամբողջ կոդը դրա մեջ՝
| $(document).ready(function(){ $(window).scroll(function () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} else {$('scroller').fadeOut();}});$('scroller').click(function () {$('body, html').animate({scrollTop: 0}, 400); վերադարձնել կեղծ;}); }); |
Հաջորդը, վերևի մենյուում սեղմեք «Ֆայլ» - «Պահպանել որպես …», որից հետո մենք պահպանում ենք կոդը.js ձևաչափով։ Դրանից հետո դուք կարող եք օգտագործել այս կոդը ձեր կայքում՝ վերբեռնելով սցենարի ֆայլերը և պատկերները՝ օգտագործելով FTP կապը:
Տեղադրեք կայքում
Կայքի համար ոլորման վերև կոճակը տեղադրելու համար անհրաժեշտ է տեղադրելանհրաժեշտ վայրի կոդը: Դուք պետք է այն մուտքագրեք պիտակից առաջ.
Կոճակի ոճի ստեղծում CSS-ով
Ամենից հաճախ կայքի «վերև» կոճակը գտնվում է ներքևում («ստորատակ»):
Հետևյալ կոդը պետք է ավելացվի կայքի style.css ֆայլում՝
|
/Վերև կոճակ/ .scrollTop{ background:url('images/up.png') 0 0 առանց կրկնության;/պատկերի մայրուղի/ width:39px;/ կոճակ լայնություն/ բարձրություն:96px;/50% կոճակի բարձրություն/ ներքև:5px;/ներքևի լցոն ֆիքսված դիրքում/ ձախ:89%;/shift ձախ/ }.scrollTop:hover{ background-position:0 -108px; } /ֆոնային շեղում/" |
Այս դեպքում անհրաժեշտ կլինեն այդ պատկերի լայնության և բարձրության տվյալները: Մնում է միայն մուտքագրել ստացված տվյալները կոդի մեջ, և կայքի «վերև» կոճակը պատրաստ կլինի: Էլ ի՞նչ:
Վերև կոճակ Wordpress կայքի համար
Այս CMS-ի համար «Up» կոճակը կարող է պատրաստվել plugins-ի միջոցով, ինչպես նաև ինքնուրույն:
Փլագինների մեթոդը ամենահարմարն ու հեշտ տեղադրվողն է, քանի որ այն պահանջում է միայն սեղմել տեղադրման կոճակը և կարգավորել բոլոր գործառույթները plugin-ի ընտրացանկում:
Վերջինիս ընտրությանը պետք է զգուշությամբ մոտենալ, քանի որ դրանով հեշտ կլինի կայքում վիրուս ձեռք բերել։ Ամենահայտնի և ապացուցված տարբերակը Scroll Back To Top կոչվող հավելվածն է: Դուք կարող եք այն ներբեռնել՝ օգտագործելով Wordpress հավելվածների ստանդարտ որոնումը:
Այս ընդլայնումն ունիբազմակի ֆունկցիոնալություն, և շատ հեշտ կլինի հարմարեցնել «վերև» կոճակը Wordpress կայքի համար: Ընդհանրապես անհրաժեշտ չէ փոխել բոլոր արժեքները, անհրաժեշտ է միայն կայքի էջում կարգավորել կոճակի տեսքը և գտնվելու վայրը:
Ինչպես տեսնում եք, պլագիններով կոճակի կարգավորումը շատ հեշտ է։ Բայց կա մեկ կարևոր նրբերանգ, այն է, որ յուրաքանչյուր տեղադրված պլագին բեռնում է CMS-ը: Սա կարող է ազդել ինտերնետ ռեսուրսի արագության վրա: Այդ իսկ պատճառով կայքի սեփականատերերի մեծ մասը փորձում է բոլոր փոփոխությունները կատարել անմիջապես կոդի մեջ, այլ ոչ թե երրորդ կողմի ընդլայնումների օգնությամբ։ Դուք կարող եք ստեղծել «վերև» կոճակ HTML կայքի համար, որը նվազագույնի կհասցնի սպառվող ռեսուրսները:
Նախքան Wordpress համակարգի բոլոր ֆայլերը փոխելը, դուք պետք է կրկնօրինակեք դրանք: Այնուհետև կարող եք հետևել վերը նկարագրված ձեր սեփական կոճակը ստեղծելու բոլոր քայլերին:
կոճակ «վերև» Joomla-ի համար
CMS Joomla-ն աջակցում է նաև պլագինների տեղադրմանը, ինչպիսին Wordpress-ն է: Joomla 3-ում կայքի «վերև» կոճակի ամենահաջող տարբերակը ընդլայնումն է, որը կոչվում է Էջի վերև:
Այս CMS-ում ցանկացած փլագին կարող է տեղադրվել «Extension Manager»-ի միջոցով: Դրա համար անհրաժեշտ է՝
- ներբեռնեք plugin-ը ինտերնետում;
- սեղմեք «Թերթել» կոճակը ընդարձակման մենեջերում;
- ընտրել ներբեռնված արխիվը;
- սեղմեք «Ներբեռնել» և տեղադրել:
Այժմ դուք պետք է այն ակտիվացնեք «Plugin Manager»-ում: Սրա համարդուք պետք է գնաք այս բաժինը, գտնեք փլագինը և փոխեք դրա կարգավիճակը «միացված»:
Հաջորդ քայլը ընդլայնման բոլոր պարամետրերի կազմաձևումն է, օգտագործելով նույն բաժինը, որտեղ դուք պետք է գտնեք այս հավելվածի «Հիմնական պարամետրերը» աջ կողմում:
Էջի վերևում ունի հետևյալ գործառույթը՝
- Գործարկել/ ադմինիստրատոր - միացնելով տարբերակը ոչ միայն ինտերնետ ռեսուրսում, այլև հենց Joomla CMS վահանակում:
- Button Reveal Position. քանի՞ պիքսել պետք է օգտագործողը հետ շրջի, որպեսզի վերև կոճակը հայտնվի:
- Omit Button Text - կոճակի վրա տեքստի առկայություն:
- Միշտ վերևում - կայքի էջը միշտ կցուցադրվի վերևից: Էջի որոշակի տեղ ոլորելու համար խարիսխներ օգտագործելիս այս տարբերակը պետք չէ միացնել:
- Smooth Scroll - էջերի ոլորումն ավելի հարթ է դարձնում:
- Ոլորման տևողություն - ժամանակը, որից հետո էջն ամբողջությամբ կտեղափոխվի սկիզբ:
- Scroll Transition - ավելացնում է ավելի շատ տեսողական էֆեկտներ ոլորման համար:
- Transition Easing - «թուլացնել» շարժումը դեպի էջի վերև:
- Հղման գտնվելու վայրը - պատկերակի գտնվելու վայրը: Լռելյայնորեն կոճակը գտնվում է ստորին աջ անկյունում։
- Օգտագործել ոճերը – կոճակի անհատական ոճ, որը կարող է սահմանվել ստորև նշված դաշտում: Եթե միացվի բացասական արժեքի, ապա ոճի բոլոր կարգավորումները կվերցվեն կայքի ակտիվ թեմայից:
- Link Style - կոճակի ոճի պարամետրերը մուտքագրելու դաշտ:
«Վեր» կոճակի ոճը հարմարեցնելու համար դուք պետք է ունենաք առնվազն նվազագույնըCCS գիտելիքներ. Հակառակ դեպքում, դուք պետք է նախավերջին պարամետրի արժեքը փոխեք «Ոչ»-ի:
Մյուս կարևոր նրբերանգն այն է, որ պատկերակի վրա սովորական մակագրությունը պարունակում է անգլերեն տեքստ՝ Վերադարձ դեպի վերև: Նման տեքստը չի կարող առկա լինել ռուսալեզու կայքում, այնպես որ դուք պարզապես պետք է անջատեք այն plugin-ի պարամետրերում կամ փոխեք այն ռուսերենի:
Այս մակագրությունը փոխելու համար հարկավոր է գնալ կայքի սերվեր՝ օգտագործելով FTP կամ հոսթինգում ներկառուցված ֆայլերի կառավարիչը: Հաջորդը, «/administrator/language/en-GB/» գրացուցակում դուք պետք է գտնեք ֆայլ, որը կոչվում է «en-GB.plg_system_topofthepage.ini»:
Տեքստը փոխելուց առաջ դուք պետք է փոխեք այս փաստաթղթի կոդավորումը UTF-8-ի: Սա կդարձնի ռուսերեն տառերի նորմալ ցուցադրում:
Հաջորդ մենք գտնում ենք հետևյալ տողը.
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Վերադառնալ սկիզբ"" |
և չակերտների արտահայտությունը դարձրեք ռուսերեն: Դուք կարող եք օգտագործել արտահայտություններ, ինչպիսիք են «Վե՛ր», «Դեպի վերև»: կամ «Վե՛ր»:
Վերջում դուք պետք է պահպանեք փոփոխված ֆայլը և ստուգեք կայքի «վերև» կոճակը Joomla-ում:
Up կոճակ Ucoz-ի համար
Ucoz-ի կայքի «վերև» կոճակը պետք է կատարվի կոդի ներարկման միջոցով, քանի որ այս CMS-ի համար պլագիններ միացնելն անհնար է: Այնուամենայնիվ, սա չի պահանջում համակարգային ֆայլերի երկար ուսումնասիրություն և անհրաժեշտ տողերի որոնում, պարզապես անհրաժեշտ է տեղադրել փոքրիկ կոդը ճիշտ տեղում:
Մեզ տեղադրելու համարպահանջվում է՝
- անցեք «Կառավարման վահանակ -> Դիզայն -> Դիզայնի կառավարում (կաղապարներ) -> Կայքի ներքևում;
- տեղադրեք սցենարը (կարելի է գտնել նախագծի պաշտոնական կայքում և երրորդ կողմի ռեսուրսները):
Եզրակացություն
Դրանից հետո ներքևի աջ անկյունում կհայտնվի պատկերակ՝ օգտատիրոջը տեղափոխելով էջի ամենավերևում:
Ինչպես տեսնում եք, CMS-ներից որևէ մեկի համար հետադարձ կոճակի կարգավորումն առանձնապես դժվար չէր: Դուք կարող եք օգտագործել և՛ ավտոմատացված տեղադրման եղանակը (պլագիններ), և՛ ձեռքով: Այնուամենայնիվ, վերջին տարբերակը մնում է ամենահարմարը, քանի որ այն բացասաբար չի ազդում կայքի աշխատանքի վրա:
Դուք կարող եք օգտագործել «ետ դեպի վեր» կոճակը HTML կայքի համար՝ նվազագույնի հասցնելու կայքի ռեսուրսների սպառումը, քանի որ մեծ թվով ընդլայնումներ կարող են բացասական ազդեցություն ունենալ ռեսուրսի աշխատանքի վրա: Մեկ «վերև» կոճակի փլագինը չի կարողանա մեծապես ազդել կայքի էջերի բեռնման ժամանակի վրա, սակայն շատ դեպքերում օգտատերը CMS-ում ունի առնվազն մեկ տասնյակ պլագին տեղադրված։ Այս դեպքում ցանկացած փլագին կարող է բացասաբար ազդել կայքի էջերի աշխատանքի վրա։
