Сайттың «жоғары» түймесі сияқты функция интернет-ресурсты келушілер үшін ыңғайлырақ етеді. Бұл беттің кез келген жерінен беттің жоғарғы жағына оңай өтуге көмектеседі. Бұл ұзақ айналдыруды қажет ететін үлкен мақалалары бар интернет-дүкендер мен сайттар үшін қажет.
Бұл не үшін
Қазіргі уақытта көптеген сайттарда «жоғары» түймесі сияқты функция жоқ және бұл жерде маңызды ештеңе жоқ. Бірақ оны пайдалану интернет-ресурс үшін де, оның келушілері үшін де көптеген артықшылықтар әкелуі мүмкін.
Келушілерге арналған жеңілдік
Бұл көбінесе интернет-ресурстың беті ақпаратқа көп жүктелгенде, ақпараттық мақала көп орын алатын кезде және тінтуірдің дөңгелегі арқылы бетті төмен айналдыру қажет болғанда орын алады. Бұған қоса, мақаланың соңында ол туралы көптеген пікірлер болуы мүмкін.
Келуші мақаланы оқығанда, бетті төмен айналдырудың шаршамайтын ештеңесі жоқ, бірақ мәтін аяқталып, жоғары көтерілу керек болғанда, ол аздап шаршай бастайды. Көптеген адамдар ұзақ уақыт айналдыруға тым жалқау болады және сайттың кеңістігін тағы бір серуендеудің орнына жай ғана жабады.
Түймені пайдаланубеттің жоғарғы жағына бірден өту сайтта уақыт өткізуді ыңғайлы етеді.
Интернет-ресурстың пайдасы
Ресурстың оң жақтары өткен факторларға байланысты, өйткені сайтты оңай шарлау мінез-құлық факторларын жақсартады, өйткені барлық келушілер өз әрекеттерінде белсендірек болады және басқа беттерге ауысады.
Осылайша, бұл мінез-құлық факторлары барлық іздеу жүйелерінің сайтқа қатынасына әсер етіп, іздеу нәтижелеріндегі позицияның жақсаруына әкеледі.
Сайттағы «жоғарылау» түймесін өзіңіз қалай жасауға болады
Әрі қарай әрекет ету. Бірнеше өте қарапайым қадамдарды орындау арқылы кез келген CMS жүйесінде сайт үшін жоғары жылжыту түймесін өзіңіз жасай аласыз:
- сурет жасау;
- скрипт жасау;
- түйме стилін жасау;
- сайтқа қосу.
Түйме суреті
Сайтқа «жоғары» түймесін қосу үшін алдымен белгішені өзі жасау керек, оны басқан кезде пайдаланушы беттің жоғарғы жағына өтеді. Ол үшін дайын опцияларды пайдалануға болады, олардың арасынан әрқашан ең қолайлысын таңдауға болады.
Түйменің сыртқы түрін жақсарту үшін бізге кейбір жақсартулар, атап айтқанда, CSS негізіндегі фондық кескіндерді біріктіріп, сол арқылы олардан анимация жасауға мүмкіндік беретін спрайт жасау керек.
Графикалық жұмыстар үшін кез келген редакторды пайдалануға болады. Бірақ ең қолайлы нұсқа онлайн қызмет болар еді. PIXLR, өйткені бұл жерден жүктеп алатын ештеңе жоқ және оны тікелей браузерде пайдалануға болады.
Бастау үшін пайда болған өңдегіш терезесінде "Суретті компьютерден жүктеп салу" өрісін таңдаңыз. Мысал ретінде ракетаның суретін алайық.
Таңдалған белгішенің өлшемдері тым үлкен болса, шағын өлшемді реттеу қажет болады. Мұны істеу үшін жоғарғы мәзірге өтіп, «Өңдеу» өрісін таңдаңыз, содан кейін «Тегін түрлендіру …»
Содан кейін суреттің жанында арнайы маркерлер пайда болады, олар кескіннің өлшемін өзгертуге болады. Пропорцияларды сақтау үшін Shift пернесін қолдануға болады, оны басып тұрып көк маркерлерді жылжыту керек. Осы қадамдардың соңында зымыранның суреті алынады.
Келесі қадам - қабаттың көшірмесін жасау.
Енді зымыранның суретін жаңа қабаттан сәл жоғары жылжыту керек. Ол үшін сол жақ мәзірдің екінші бағанында орналасқан жылжыту құралын және пернетақтадағы жоғары көрсеткіні пайдалану ыңғайлы болады.
Енді жоғарғы суретті ақ-қара етіп жасау керек. Мұны жоғарғы мәзірдегі «Түзету» - «Реңк / қанықтылық» тармағы арқылы жасауға болады. Толық қанықтыру үшін қанықтылық сырғытпасын -100 мәніне орнату керек. Бұл әрекет "Жоғары" түймесі меңзерді үстіне апарған кезде ақ-қарадан түрлі-түстіге айналатын эффект жасауға мүмкіндік береді.
Соңғы жанасу - екі суреттің айналасындағы қосымша кеңістікті жою. Ол үшін сол жақ мәзірден «Қыру» тармағын таңдаңыз жәнебіз тіктөртбұрыштан тек екі зымыран таңдаймыз. Қиюды орындау үшін Enter пернесі басылады.
Нәтиже – қосымша бос орын жоқ кескін. Алынған кескіннің ені мен биіктігін жазуыңыз керек, себебі бұл деректер келесі қадамда пайдалы болады.
Сақтау үшін «Файл» - «Сақтау» түймесін басу керек, сол жақта «Менің компьютерім» абзацында суреттің атын жазамыз (тек ағылшынша макет), пішімін таңдаңыз (бұл жерде регистр, PNG) және "Иә" түймесін басыңыз.
"жоғары" түймесі сценарийі бар файл
Бұл жағдайда сценарий жазудың қажеті жоқ. Дайын кодқа кейбір түзетулер енгізу арқылы жалпыға қолжетімді нұсқаны пайдалануға болады.
Ол үшін кез келген код өңдегішін жүктеп алу керек. Ең танымал және сонымен қатар тегін опция - Notepad++. Оны орнатқаннан кейін оған осы кодтың барлығын көшіріп, қою керек:
| $(құжат).дайын(функция(){ $(терезе).scroll(функция () {егер ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} else {$('scroller').fadeOut();}}); $('scroller').click(функция () {$('body, html').animate({scrollTop: 0}, 400); өтірік қайтару;}); }); |
Содан кейін жоғарғы мәзірде «Файл» - «Басқаша сақтау…» түймесін басыңыз, содан кейін кодты.js пішімінде сақтаймыз. Осыдан кейін FTP қосылымы арқылы сценарий файлдары мен кескіндерді жүктеп салу арқылы сайтыңызда осы кодты пайдалануға болады.
Сайтта орнату
Сайт үшін жоғары айналдыру түймесін орнату үшін кіру керекқажетті орын коды. Оны. тегінің алдында енгізу керек
CSS көмегімен түйме стилін жасау
Көбінесе сайттың «жоғары» түймесі төменгі жағында («төменгі деректеме») орналасқан.
Келесі код сайттың style.css файлына қосылуы керек:
|
/Жоғары түйме/ .scrollTop{ background:url('images/up.png') 0 0 қайталанбайды;/негізгі кескін жолы/ ені:39px;/ түймесі ені/ height:96px;/50% түйме биіктігі/ bottom:5px;/белгіленген күйдегі төменгі төсеу/ left:89%;/солға жылжыту/ }.scrollTop: hover{ background-position:0 -108px; } /фонның ауытқуы/" |
Бұл жағдайда кескіннің ені мен биіктігі туралы деректер қажет болады. Алынған деректерді кодқа енгізу ғана қалады, ал сайттың «жоғары» түймесі дайын болады! Тағы не?
Wordpress сайтына арналған жоғары түймесі
Осы CMS үшін "Жоғары" түймешігін плагиндер арқылы да, дербес те жасауға болады.
Плагиндер әдісі ең ыңғайлы және орнату оңай, себебі ол тек орнату түймесін басып, плагин мәзіріндегі барлық функцияларды конфигурациялауды талап етеді.
Соңғысын таңдауға сақтықпен қарау керек, өйткені оның көмегімен сайтта вирусты алу оңай болады. Ең танымал және дәлелденген опция - Scroll Back To Top деп аталатын плагин. Оны Wordpress плагиндерін стандартты іздеу арқылы жүктеп алуға болады.
Бұл кеңейтімде барбірнеше функционалдылық бар және Wordpress сайты үшін «жоғары» түймесін теңшеу өте оңай болады. Барлық мәндерді мүлде өзгерту қажет емес, тек сайт бетіндегі түйменің көрінісін және орнын конфигурациялау қажет.
Көріп отырғаныңыздай, плагиндер көмегімен орнату түймесін орнату өте оңай. Бірақ бір маңызды нюанс бар, ол әрбір орнатылған плагин CMS-ті жүктейді. Бұл интернет-ресурс жылдамдығына әсер етуі мүмкін. Сондықтан көптеген сайт иелері барлық өзгертулерді үшінші тарап кеңейтімдерінің көмегімен емес, тікелей кодта жасауға тырысады. Тұтынылатын ресурстарды азайтатын HTML сайты үшін «жоғары» түймесін жасауға болады.
Барлық Wordpress жүйелік файлдарын өзгертпес бұрын, олардың сақтық көшірмесін жасау керек. Содан кейін жоғарыда сипатталған жеке түймені жасау үшін барлық қадамдарды орындай аласыз.
Joomla үшін «жоғары» түймесі
CMS Joomla сонымен қатар Wordpress сияқты плагиндерді орнатуды қолдайды. Joomla 3 жүйесіндегі сайтқа арналған «жоғары» түймесінің ең сәтті нұсқасы Беттің жоғарғы жағы деп аталатын кеңейтім болып табылады.
Бұл CMS жүйесінде кез келген плагинді "Кеңейтім реттеушісі" арқылы орнатуға болады. Ол үшін сізге қажет:
- плагинді интернеттен жүктеп алыңыз;
- кеңейтім менеджеріндегі "Шолу" түймесін басыңыз;
- жүктелген мұрағатты таңдау;
- "Жүктеп алу" түймесін басып, орнатыңыз.
Енді оны "Плагин менеджерінде" белсендіру керек. Осығаносы бөлімге өтіп, плагинді тауып, оның күйін "қосылған" күйіне ауыстыру керек.
Келесі қадам осы плагиннің "Негізгі параметрлерін" оң жақтан табу керек бөлімді пайдаланып барлық кеңейтім параметрлерін конфигурациялау болып табылады.
Беттің жоғарғы жағында келесі функция бар:
- Іске қосу/әкімші – опцияны тек интернет-ресурста ғана емес, сонымен қатар Joomla CMS панелінің өзінде де қосады.
- Түйменің көрсетілу орны - жоғары түймесі пайда болуы үшін пайдаланушы қанша пиксельді артқа айналдыруы керек.
- Өткізіп жіберу түймесі мәтіні - түймедегі мәтіннің болуы.
- Әрқашан жоғарғы жағында - сайт беті әрқашан жоғарғы жағынан көрсетіледі. Беттегі белгілі бір орынға жылжу үшін анкерлерді пайдаланған кезде бұл опцияны қосу қажет емес.
- Тегіс айналдыру - беттің жылжуын тегіс етеді.
- Айналдыру ұзақтығы - кейін бет толығымен басына жылжитын уақыт.
- Айналдыру ауысуы - айналдыруға көбірек көрнекі әсерлер қосады.
- Өтпелі кезеңді жеңілдету – беттің жоғарғы жағына қозғалысты «әлсіретеді».
- Сілтеме орны - белгішенің орны. Әдепкі бойынша түйме төменгі оң жақ бұрышта орналасқан.
- Стильдерді пайдалану – төмендегі өрісте орнатуға болатын жеке түйме мәнері. Теріс мәнге ауыстырылса, барлық стиль параметрлері сайттың белсенді тақырыбынан алынады.
- Сілтеме стилі - түйме мәнері параметрлерін енгізуге арналған өріс.
"Жоғары" түймесінің мәнерін реттеу үшін сізде кем дегенде минималды болуы керекCCS білімі. Әйтпесе, соңғы параметрдің мәнін "Жоқ" күйіне ауыстыру керек.
Тағы бір маңызды нюанс - белгішедегі әдеттегі жазу ағылшын тіліндегі мәтінді қамтиды: Жоғарыға оралу. Мұндай мәтін орыс тілді сайтта болуы мүмкін емес, сондықтан оны плагин параметрлерінде өшіру керек немесе орыс тіліне өзгерту керек.
Бұл жазуды өзгерту үшін FTP немесе хостингке енгізілген файл менеджері арқылы сайт серверіне өту керек. Әрі қарай, "/administrator/language/en-GB/" каталогында "en-GB.plg_system_topofthepage.ini" деп аталатын файлды табу керек.
Мәтінді өзгертпес бұрын, бұл құжаттың кодтауын UTF-8 етіп өзгерту керек. Бұл орыс әріптерін қалыпты түрде көрсетеді.
Кейін келесі жолды табамыз:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Жоғарыға оралу"" |
және тырнақшадағы сөйлемді орысшаға өзгертіңіз. «Жоғары!», «Жоғарыға!» сияқты сөз тіркестерін қолдануға болады. немесе «Жоғары!».
Соңында өзгертілген файлды сақтап, Joomla сайтындағы «жоғары» түймесін тексеру керек.
Ucoz үшін жоғары түймесі
Ucoz сайтындағы "жоғары" түймесі код енгізу арқылы орындалуы керек, себебі бұл CMS үшін плагиндерді қосу мүмкін емес. Дегенмен, бұл жүйелік файлдарды ұзақ зерттеуді және қажетті жолдарды іздеуді қажет етпейді, сізге кішкене кодты дұрыс жерге қою керек.
Бізді орнату үшінқажет:
- "Басқару тақтасы -> Дизайн -> Дизайнды басқару (үлгілер) -> Сайттың төменгі жағына өтіңіз;
- сценарийді енгізіңіз (жобаның ресми веб-сайтынан және үшінші тарап ресурстарынан табуға болады).
Қорытынды
Одан кейін төменгі оң жақ бұрышта пайдаланушыны беттің ең жоғарғы жағына жылжытатын белгіше пайда болады.
Көріп отырғаныңыздай, кез келген CMS үшін кері түймені орнату аса қиын болған жоқ. Автоматтандырылған орнату әдісін (плагиндер) және қолмен пайдалануға болады. Дегенмен, соңғы опция ең қолайлы болып қалады, себебі ол сайттың жұмысына кері әсер етпейді.
Торап ресурстарын тұтынуды азайту үшін HTML сайты үшін "жоғарыға оралу" түймесін пайдалануға болады, себебі кеңейтімдердің көп саны ресурс өнімділігіне теріс әсер етуі мүмкін. Бір «жоғары» түймесінің плагині сайт беттерінің жүктелу уақытына айтарлықтай әсер ете алмайды, бірақ көп жағдайда пайдаланушыда CMS жүйесінде кемінде ондаған плагин орнатылған. Бұл жағдайда кез келген плагин сайт беттерінің жұмысына кері әсер етуі мүмкін.
