Дугме "горе" за сајт: како направити

Интернет

Таква функција као дугме за горе на сајту,чини онлине ресурс прикладнијим за своје посетиоце. Помаже при лакшем кретању од било ког места до врха странице. То је неопходно само за онлине продавнице и веб сајтове са великим чланцима који захтевају дугачко померање надоле.

За шта је?

Тренутно, на већини сајтова таквихнема функције као што је горње дугме, и нема ничег критичног у томе. Али његова употреба може донијети многе предности и за интернетски ресурс и за његове посјетитеље.

Погодности за посетиоце

То се често дешава када је страница са Интернет ресурсиматешко учитани са информацијама, када чланак са информацијама заузима доста простора и морате да се померите надоле страном помоћу точкића миша. Поред тога, на крају чланка може бити много коментара.

Када посетилац прочита чланак, ништанема досадног померања по страни, али када се текст заврши и треба да се померите горе, почиње да се мало умара. Вецина људи це само бити лењи да би се дрзали дуже време, и једноставно це затворити сајт, уместо да се крецу око његових пространстава.

Коришћењем дугмета да бисте се одмах померили на врх странице, прегледање сајта је лакше.

Корист за интернетски ресурс

дугме за сајт

Изгледају позитивни аспекти самог ресурсаиз прошлих фактора, јер поједностављена навигација кроз сајт побољшава бихевиоралне факторе, јер ће сви посетиоци бити активнији у својим акцијама и отићи ће на друге странице.

Дакле, ови фактори понашања утичу на став свих претраживача на сајт и доводе до побољшања у резултатима претраге.

Како да сами направите дугме "горе" на сајту

дугме за хтмл сајт

Разумемо даље. Дугме за померање горе за сајт на било ком ЦМС-у увек може да се уради независно следећи неколико веома једноставних корака:

  • стварање слике;
  • креирање сценарија;
  • креирање стила дугмета;
  • додавање на сајт.

Слика дугмета

Да бисте додали дугме горе на Веб локацији, заПочните морате да направите саму икону, када кликнете, корисник ће се померити горе на страници. За то можете користити готове опције, међу којима увек можете одабрати најпогодније.

Да би се побољшао изглед дугмета, потребно је извршити нека побољшања, наиме направити сприте, који дозвољава ЦСС-базиране позадинске слике за спајање, чиме се ствара анимација.

За графички рад можете користити било који едитор. Али најпогоднија опција би била ПИКСЛР онлине услуга, пошто не морате да преузимате ништа овде и можете је користити директно у претраживачу.

Да бисте почели да радите у прозору едитора који се појави, изаберите поље „Учитавање слике са рачунара“. На пример, узмите слику ракете.

како направити дугме на сајту

Ако су димензије изабране иконе превелике, ондапотребно је направити мало подешавање величине. Да бисте то урадили, идите на главни мени и изаберите поље "Измени", а после "Слободна трансформација ..."

Следеће, поред слике су посебнемаркери које померате могу да промене величину слике. Да бисте одржали пропорције, можете користити тастер Схифт, држећи оно што вам је потребно за померање плавих маркера. На крају ових акција добија се слика ракете.

Следећи корак је да направите копију слоја.

Сада требате помакнути слику ракетенови слој мало. Да бисте то урадили, биће згодно користити алат за померање, који се налази у другој колони левог менија, и стрелицу нагоре на тастатури.

Сада морате да направите црну и белу слику на врху. Ово се може урадити помоћу ставке “Корекција” - “Хуе / Сатуратион” у горњем менију. За потпуно избељивање, клизач Сатуратион треба да буде подешен на -100. Ова акција ће вам омогућити да направите ефекат у којем ће се дугме Горе окренути од црне до беле боје када пређете преко њега.

Последњи додир је уклањање додатног простора.око две слике. Да бисте то урадили, изаберите ставку “Трим” у левом менију и изаберите само две ракете у правоугаонику. Да бисте извршили подешавање, притисните тастер Ентер.

Испоставило се да слика у којој нема вишка простора. Мораћете да забележите ширину и висину добијене слике, јер ће ови подаци бити корисни у следећем кораку.

како направити дугме на сајту

Да бисте уштедели потребно је да кликнете на "Филе" -“Сачувај”, где у левом делу “Мој рачунар” записујемо име слике (само енглески распоред), изаберемо формат (у овом случају - ПНГ) и кликнемо дугме “Да”.

Датотека са скриптом дугмета горе

Писање скрипте у овом случају није потребно. Могуће је користити јавно доступну опцију, уносећи неке исправке у готов код.

Да бисте то урадили, морате преузети било који едитор кода. Најпопуларнија и најјефтинија опција је Нотепад ++. Након инсталирања, морате да копирате и налепите сав тај код у њега:

<сцрипт типе = "тект / јавасцрипт"> $ (документ).реади (фунцтион () {$ (виндов) .сцролл (фунцтион) {иф ($ (тхис) .сцроллТоп ()> 0) {$ ("# сцроллер"). фадеИн ();} елсе {$ ("# # сцроллер "). фадеОут ();}}); $ (" # сцроллер "). цлицк (фунцтион () {$ (" боди, хтмл "). анимате ({сцроллТоп: 0}, 400); </ сцрипт>

Затим кликните на горњи мени "Филе" - "Саве"ас ... ”, након чега чувамо код у .јс формату. Након тога, можете користити овај код на вашој веб локацији тако што ћете учитати скрипте и слике користећи ФТП везу.

Инсталација на сајту

Да бисте поставили дугме за померање за сајт, потребно је да га поставите на жељену локацију. Морате га унети пре ознаке </ боди>.

Креирање стила тастера у ЦСС-у

Најчешће, тастер "горе" за сајт се налази на дну ("подрум").

Следећи код треба да се унесе у датотеку стиле.цсс сајта:

"/ * Дугме горе /

.сцроллТоп {
бацкгроунд: урл ("имагес / уп.пнг") 0 0 но-репеат; / * одговарајући пут до слике * /
ширина: 39пк; / * ширина дугмета * /
висина: 96пк; / * 50% висине дугмета * /
дно: 5пк; / * на фиксној позицији с дном * /
лево: 89%; / * померање лево * /
}
.сцроллТоп: ховер {позадинска позиција: 0 -108пк; } / * позадински офсет * / "

У овом случају, потребна нам је ширина и висина слике. Остаје само да унесете податке у код, а дугме "горе" за сајт ће бити спремно! Шта још?

Вордпресс Уп Буттон за Вордпресс Вебсите

како направити дугме на сајту

За овај ЦМС, тастер “Горе” се може направити помоћу плуг-инова, као и независно.

Метод са плуг-иновима је најпогоднији и најједноставнији за инсталацију, јер за то је потребно само да кликнете на дугме за инсталацију и конфигуришете сву функционалност у плуг-ин менију.

Одабиром овог потоњег треба доћиопрезно, јер помоћу њега можете лако купити вирус на сајту. Најпопуларнија и доказана опција је плугин под називом Сцролл Бацк То Топ. Можете га преузети користећи стандардну претрагу Вордпресс плугин-а.

Ово проширење има вишефункционалност, и биће веома лако индивидуализовати дугме "горе" за Вордпресс сајт. Није потребно мијењати све вриједности, потребно је само конфигурирати изглед и локацију гумба на страници странице.

Као што можете да видите, подешавање дугмета горе саплугинс је врло једноставан. Али постоји једна важна нијанса, која се састоји у томе да сваки инсталирани плугин учитава ЦМС. Ово може утицати на брзину интернет ресурса. Зато већина власника сајта покушава да изврши све промене директно у коду, а не користи екстензије трећих страна. Можете направити дугме "горе" за сајт у ХТМЛ-у, што ће минимизирати потрошене ресурсе.

Пре него што измените све Вордпресс системске датотеке, морате да их направите резервне копије. Затим можете пратити све кораке како бисте креирали властито дугме, описано горе.

Кноцк Уп фор Јоомла

горе дугме за јоомла 3 сајт

Јоомла ЦМС такође подржава инсталацију плугина, баш као и Вордпресс. Најуспешнија опција за дугме горе за Јоомла 3 сајт је проширење које се зове Топ оф тхе Паге.

У овом ЦМС-у, сваки плуг-ин се може инсталирати преко "Ектенсион Манагер". За ово вам је потребно:

  • преузимање додатка на Интернет;
  • кликните на дугме “Бровсе” у менаџеру за проширење;
  • изаберите преузету архиву;
  • Кликните на "Довнлоад" и инсталирајте.

Сада га морате активирати у "Плугин Манагер". Да бисте то урадили, идите на овај одељак, пронађите додатак и пребаците његово стање на "укључено".

Затим долази конфигурација свих параметара експанзије користећи исту секцију где треба да нађете “Главни параметри” овог плуг-ина на десној страни.

Врх странице има следеће функције:

  • Рун ин / администратор - омогућите опцију не само на Интернет ресурсу, већ иу самом ЦМС Јоомла панелу.
  • Дугме Откриј позицију - колико пиксела корисник мора да одмотне како би се појавио горњи тастер.
  • Омит Буттон Тект - присутност текста на дугмету.
  • Увек на врху - страна сајта ће бити приказана све време од почетка. Када користите сидра за померање до одређеног места на страници, ова опција не мора бити активирана.
  • Смоотх Сцролл - глатко померање странице.
  • Трајање скроловања - време након којег се страница потпуно помера на почетак.
  • Сцролл Транситион - додаје померање великих визуелних ефеката.
  • Транситион Еасинг - "олакшавање" преласка на врх странице.
  • Локација везе - локација иконе. Стандардно, дугме се налази у доњем десном углу.
  • Користи стилове - стил појединачног дугмета који се може поставити у поље испод. Ако се пребаци на негативну вредност, онда ће сви параметри стила бити узети из активне теме локације.
  • Линк Стиле - поље за унос параметара стила тастера.

Да бисте сами подесили стил „горе“ дугмета морате имати барем минимално знање о ЦЦС-у. У супротном, вреди пребацити вредност претпоследњег параметра на "Не".

Још једна важна нијанса је тоуобичајени натпис на икони садржи текст на енглеском језику: Повратак на врх. На сајту на руском језику такав текст не може бити присутан, тако да га једноставно искључите у подешавањима додатка или га промените на руски.

Да бисте променили овај натпис, морате ићисервер који користи ФТП или филе манагер уграђен у хостинг. Затим, у директоријуму “/ администратор / лангуаге / ен-ГБ /”, морате пронаћи датотеку под називом “ен-ГБ.плг_систем_топофтхепаге.ини”.

Пре него што промените текст, промените кодирање овог документа у утф-8. Ово ће направити нормалан приказ руских слова.

Следеће, налазимо ову линију:

"ПЛГ_СИС_ТОПОФТХЕПАГЕ_ГОТОТОП =" Повратак на врх ""

и промените фразу у цитате на руски. Можете користити фразе као што су “Уп!”, “Топ!” Или “Уп!”.

На крају ћете морати да сачувате измењену датотеку и проверите присуство дугмета "горе" за Јоомла сајт.

Гумб Уцоз уп

дугме за померање за сајт

Дугме за горе за Уцоз сајт ће морати да се урадиупотребом ињекције кода, јер плуг-инови не могу бити повезани са овим ЦМС-ом. Међутим, није потребно дуго проучавати датотеке система и тражити потребне линије, само требате уметнути мали број на тражено мјесто.

За инсталацију нам је потребно:

  • идите на "Цонтрол Панел -> Десигн -> Десигн Манагемент (темплатес) -> Боттом оф тхе сите;
  • уметните скрипту (може се наћи на званичном сајту пројекта и ресурсима треће стране).

Закључак

Након тога, икона ће се појавити у доњем десном углу, премештајући корисника на сам врх странице.

Као што видите, подесите дугме "Горе"било који ЦМС није био посебно тежак. Може се користити као аутоматска метода инсталације (плуг-инс) и ручно. Међутим, ова друга опција остаје најприкладнија, јер не утиче негативно на брзину локације.

Можете користити дугме горе за неки сајтХТМЛ како би се смањила потрошња ресурса сајта, јер велики број проширења може имати негативан утицај на брзину ресурса. Један плуг-уп тастер "горе" неће моћи значајно да утиче на време учитавања страница сајта, али у већини случајева корисник има најмање десет додатака инсталираних на ЦМС-у. У том случају, сваки додатак може негативно утицати на перформансе страница на веб-локацији.

Коментари (0)
Додајте коментар