Сайттын "өйдө" баскычы сыяктуу функция интернет-ресурсту анын коноктору үчүн ыңгайлуураак кылат. Бул сизге барактын каалаган жеринен барактын башына оңой жылдырууга жардам берет. Бул ылдый сыдырууну талап кылган чоң макалалары бар онлайн дүкөндөр жана сайттар үчүн керек.
Бул эмне үчүн
Учурда көпчүлүк сайттарда "өйдө" баскычы сыяктуу функция жок жана мында эч кандай маанилүү нерсе жок. Бирок аны колдонуу интернет-ресурс үчүн да, анын коноктору үчүн да көптөгөн артыкчылыктарды алып келиши мүмкүн.
Келгендер үчүн пайда
Бул көбүнчө интернет-ресурстун баракчасы маалыматка бай болгондо, маалыматтык макала көп орунду ээлегенде жана чычкандын дөңгөлөгү менен баракты ылдый сыдырууга туура келгенде болот. Мындан тышкары, макаланын аягында ал боюнча көптөгөн пикирлер болушу мүмкүн.
Келүүчү макаланы окуганда, баракты ылдый сыдырууда чарчаган эч нерсе жок, бирок текст бүтүп, сиз өйдө жылышыңыз керек болгондо, ал бир аз чарчап баштайт. Көпчүлүк адамдар жөн эле көпкө чейин сыдырууга жалкоо болушат жана сайттын кең жерлерин кыдырбай, жөн эле жаап коюшат.
Баскычты колдонуудароо беттин башына жылдыруу сайтта убакыт өткөрүүгө ыңгайлуураак кылат.
Интернет-ресурс үчүн пайда
Ресурстун оң жактары мурунку факторлордон келип чыгат, анткени сайтты оңой навигациялоо жүрүм-турум факторлорун жакшыртат, анткени бардык коноктор өз аракеттеринде активдүүрөөк болуп, башка барактарга өтүшөт.
Ошентип, бул жүрүм-турум факторлору бардык издөө системаларынын сайтка болгон мамилесине таасир этип, издөө натыйжаларындагы позициянын жакшырышына алып келет.
Сайттагы "жогорулатуу" баскычын кантип өзүңүз жасаса болот
Мындан ары мамиле кылуу. Бир нече өтө жөнөкөй кадамдарды аткаруу менен сиз каалаган CMSтин каалаган сайтында өйдө сыдырма баскычын жасай аласыз:
- сүрөт түзүү;
- скрипт түзүү;
- баскычтын стилин түзүү;
- сайтка кошулууда.
Баскыч сүрөтү
Сайтка "жогорулатуу" баскычын кошуу үчүн адегенде сөлөкөттүн өзүн жасашыңыз керек, басылганда колдонуучу барактын жогору жагына жылат. Бул үчүн сиз даяр варианттарды колдонсоңуз болот, алардын ичинен сиз дайыма эң ылайыктуусун тандай аласыз.
Баскычтын сырткы көрүнүшүн жакшыртуу үчүн, биз кээ бир жакшыртууларды жасашыбыз керек, тактап айтканда, CSS негизинде фондо сүрөттөрдү бириктирип, анимация түзүүгө мүмкүндүк берген спрайт жасашыбыз керек.
Графикалык иштер үчүн каалаган редакторду колдонсоңуз болот. Бирок эң ыңгайлуу вариант онлайн сервис болмок. PIXLR, анткени бул жерден жүктөп ала турган эч нерсе жок жана аны түздөн-түз браузериңизде колдоно аласыз.
Баштоо үчүн, пайда болгон редактордун терезесинде "Сүрөттү компьютерден жүктөө" талаасын тандаңыз. Мисал катары ракетанын сүрөтүн алалы.
Эгер тандалган сөлөкөттүн өлчөмдөрү өтө чоң болсо, анда сиз кичине өлчөмдө тууралоо жасашыңыз керек болот. Бул үчүн, жогорку менюга өтүп, "Түзөтүү" талаасын тандаңыз, андан кийин "Эркин трансформация …"
Кийин, сүрөттүн жанында атайын маркерлер пайда болот, аларды жылдырып, сүрөттүн өлчөмүн өзгөртө аласыз. Пропорцияларды сактоо үчүн Shift баскычын колдонсоңуз болот, аны кармап туруу менен көк маркерлерди жылдыруу керек. Бул кадамдардын аягында ракетанын сүрөтү алынат.
Кийинки кадам - катмардын көчүрмөсүн түзүү.
Эми ракетанын сүрөтүн жаңы катмардан бир аз өйдө жылдырышыңыз керек. Бул үчүн сол менюнун экинчи тилкесинде жайгашкан жылдыруу куралын жана клавиатурадагы өйдө жебени колдонуу ыңгайлуу болот.
Эми биз жогорку сүрөттү ак-кара кылып алышыбыз керек. Муну жогорку менюдагы "Оңдоо" - "Реңке / Каныктыруу" пункту аркылуу жасаса болот. Толук десатурация үчүн, Saturation сыдырмасын -100 коюу керек. Бул аракет сизге эффектти түзүүгө мүмкүндүк берет, анда "Жогору" баскычы курсордун үстүнө келгенде ак-карадан түскө айланат.
Акыркы тийүү - бул эки сүрөттүн айланасындагы кошумча мейкиндикти алып салуу. Бул үчүн, сол менюдан "Кыруу" пунктун тандаңыз жанатик бурчтуктан эки гана ракетаны тандайбыз. Кесүүнү аткаруу үчүн Enter баскычы басылган.
Натыйжада кошумча бош орун жок сүрөт. Сиз пайда болгон сүрөттүн туурасын жана бийиктигин жазышыңыз керек, анткени бул маалыматтар кийинки кадамда пайдалуу болот.
Сактоо үчүн "Файл" - "Сактоо" баскычын чыкылдатуу керек, ал жерде "Менин компьютерим" сол абзацында сүрөттүн атын (англисче макети гана) жазабыз, форматты тандайбыз (бул жерде case, PNG) жана "Ооба" баскычын басыңыз.
"Жогору" баскычынын скрипти менен файл
Мындай учурда сценарий жазуунун кереги жок. Даяр кодго айрым түзөтүүлөрдү киргизүү менен жалпыга ачык версиясын колдонууга болот.
Бул үчүн сиз каалаган код редакторун жүктөп алышыңыз керек. Эң популярдуу жана ошондой эле бекер опция - Notepad++. Аны орноткондон кийин, бул коддун баарын көчүрүп, ага чапташыңыз керек:
| $(document).ready(function(){ $(терезе).scroll(функция () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} else {$('scroller').fadeOut();}}); $('scroller').click(функция () {$('body, html').animate({scrollTop: 0}, 400); false кайтаруу;});}); |
Кийин, жогорку менюдан "Файл" - "Төмөнкү катары сактоо …" баскычын чыкылдатыңыз, андан кийин биз кодду.js форматында сактайбыз. Андан кийин, FTP туташуусу аркылуу скрипт файлдарын жана сүрөттөрдү жүктөө менен бул кодду сайтыңызда колдоно аласыз.
Сайтка орнотуу
Сайттын өйдө сыдыруу баскычын коюу үчүн, сиз жайгаштырышыңыз керекталап кылынган жер коду. Аны. тегинен мурун киргизишиңиз керек
CSS менен баскыч стилин түзүү
Көбүнчө сайттын "өйдө" баскычы ылдый жагында ("колонтитул") жайгашкан.
Төмөнкү код сайттын style.css файлына кошулушу керек:
|
/Жогору баскычы/ .scrollTop{ background:url('images/up.png') 0 0 кайталанбайт;/түпкү сүрөт жолу/ width:39px;/ баскычы width/ 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 панелинин өзүндө иштетүү.
- Баскычты ачуу абалы - өйдө баскычы пайда болушу үчүн колдонуучу канча пикселди артка түртүшү керек.
- Өтүү баскычынын тексти - баскычта тексттин болушу.
- Дайыма жогоруда - сайттын барагы ар дайым жогору жактан көрсөтүлөт. Беттеги белгилүү бир жерге сыдыруу үчүн анкерлерди колдонгондо, бул опцияны иштетүүнүн кереги жок.
- Smooth Scroll - баракты жылмакай кылат.
- Сыдыруу узактыгы - барак толугу менен башына жыла турган убакыт.
- Сыдыруу өтүү - Сыдыруу үчүн көбүрөөк визуалдык эффекттерди кошот.
- Өткөөлдү жеңилдетүү - барактын башына кыймылды "алсыратат".
- Шилтеменин жайгашкан жери - сөлөкөттүн жайгашкан жери. Демейки боюнча, баскыч төмөнкү оң бурчта жайгашкан.
- Стильдерди колдонуңуз – жеке баскыч стили, аны төмөнкү талаага коюуга болот. Эгер терс мааниге которулса, анда бардык стил жөндөөлөрү сайттын активдүү темасынан алынат.
- Шилтеме стили - баскыч стилиңиздин параметрлерин киргизүү үчүн талаа.
"Жогору" баскычынын стилин ыңгайлаштыруу үчүн сизде жок дегенде минималдуу болушу керек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де жок дегенде ондогон плагиндер орнотулган. Мындай учурда ар кандай плагин сайттын барактарынын иштешине терс таасирин тийгизиши мүмкүн.
