Такава функция като бутона "нагоре" за сайта прави интернет ресурса по-удобен за неговите посетители. Помага ви лесно да се придвижвате от всяко място на страницата до горната част на страницата. Това е задължително за онлайн магазини и сайтове с големи статии, които изискват дълго превъртане надолу.
За какво е
В момента повечето сайтове нямат такава функция като бутон "нагоре" и в това няма нищо критично. Но използването му може да донесе много предимства както за интернет ресурса, така и за неговите посетители.
Ползи за посетителите
Често се случва, когато страницата на интернет ресурс е силно натоварена с информация, когато информационна статия заема много място и трябва да превъртите страницата надолу с колелото на мишката. В допълнение към това, в края на статията може да има много коментари по нея.
Когато посетител чете статия, няма нищо уморително в превъртането надолу по страницата, но когато текстът свърши и трябва да се придвижите нагоре, започва да става малко досадно. Повечето хора просто ще бъдат твърде мързеливи, за да превъртат дълго време и просто ще затворят сайта, вместо да направят още една разходка из неговите простори.
Използване на бутоназа незабавно преместване в горната част на страницата става по-удобно да прекарвате време в сайта.
Полза за интернет ресурса
Позитивите за самия ресурс идват от минали фактори, тъй като по-лесната навигация в сайта подобрява поведенческите фактори, тъй като всички посетители ще бъдат по-активни в действията си и ще преминат към други страници.
По този начин тези поведенчески фактори влияят на отношението на всички търсачки към сайта и водят до подобряване на позицията в резултатите от търсенето.
Как сами да направите бутона "нагоре" на сайта
По-нататък. Винаги можете сами да направите бутон за превъртане нагоре за сайт на която и да е от CMS, като следвате само няколко изключително прости стъпки:
- създаване на изображение;
- създаване на скрипт;
- създайте стил на бутон;
- добавяне към сайта.
Изображение на бутон
За да добавите бутон "нагоре" на сайта, първо трябва да направите самата икона, при щракване потребителят ще се премести в горната част на страницата. За да направите това, можете да използвате готови опции, сред които винаги можете да изберете най-подходящия.
За да подобрим външния вид на бутона, трябва да направим някои подобрения, а именно да направим спрайт, който ни позволява да комбинираме фонови изображения на базата на CSS, като по този начин създаваме анимация от тях.
За графични произведения можете да използвате всеки редактор. Но най-удобният вариант би бил онлайн услуга. PIXLR, тъй като тук няма какво да изтеглите и можете да го използвате директно в браузъра си.
За да започнете, в прозореца на редактора, който се показва, изберете полето "Качване на изображение от компютър". Да вземем за пример изображението на ракета.
Ако размерите на избраната икона са твърде големи, тогава ще трябва да направите малка корекция на размера. За да направите това, отидете в горното меню и изберете полето "Редактиране", а след "Безплатна трансформация…"
След това до снимката се появяват специални маркери, премествайки които можете да промените размера на изображението. За да поддържате пропорциите, можете да използвате клавиша Shift, задържайки който трябва да преместите сините маркери. В края на тези стъпки се получава изображение на ракета.
Следващата стъпка е да създадете копие на слоя.
Сега трябва да преместите снимката на ракетата от новия слой малко нагоре. За да направите това, ще бъде удобно да използвате инструмента за преместване, който се намира във втората колона на лявото меню, и стрелката нагоре на клавиатурата.
Сега трябва да направим горната снимка черно-бяла. Това може да стане с помощта на елемента "Корекция" - "Hue / Saturation" в горното меню. За пълно намаляване на насищането плъзгачът Saturation трябва да бъде настроен на -100. Това действие ще ви позволи да създадете ефект, при който бутонът "Нагоре" ще се превърне от черно-бял в цветен, когато задържите курсора на мишката върху него.
Последният щрих е премахването на допълнително пространство около двете снимки. За да направите това, изберете елемента "Изрязване" от лявото меню иизбираме само две ракети в правоъгълник. За да извършите изрязване, се натиска клавиша Enter.
Резултатът е изображение, в което няма допълнително свободно място. Ще трябва да запишете ширината и височината на полученото изображение, тъй като тези данни ще бъдат полезни в следващата стъпка.
За да запазите, трябва да кликнете върху "Файл" - "Запазване", където в левия параграф "Моят компютър" пишем името на изображението (само английското оформление), изберете формата (в този case, PNG) и щракнете върху бутона „Да“.
Файл със скрипта на бутона "нагоре"
В този случай не е необходимо да пишете скрипт. Ще бъде възможно да се използва публичната версия, като се направят някои изменения в готовия код.
За да направите това, трябва да изтеглите всеки редактор на код. Най-популярната и безплатна опция е Notepad++. След като го инсталирате, трябва да копирате и поставите целия този код в него:
| $(документ).ready(function(){ $(window).scroll(function () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} else {$('scroller').fadeOut();}}); $('scroller').click(function () {$('body, html').animate({scrollTop: 0}, 400); върне false;}); }); |
Следва щракнете в горното меню "Файл" - "Запиши като …", след което записваме кода във формат.js. След това можете да използвате този код на вашия сайт, като качите скриптовите файлове и изображения в него чрез FTP връзка.
Инсталиране на сайта
За да настроите бутона за превъртане нагоре за сайта, трябва да го поставитеизискван код на място. Трябва да го въведете преди етикета.
Създаване на стил на бутон с CSS
Най-често бутонът "нагоре" за сайта се намира в долната част ("долен колонтитул").
Следният код трябва да бъде добавен към файла style.css на сайта:
|
/Бутон нагоре/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/автоматичен път на изображението/ width:39px;/ бутон ширина/ височина:96px;/50% височина на бутона/ bottom:5px;/долна подплата във фиксирана позиция/ ляво:89%;/изместване наляво/ }.scrollTop:hover{ background-position:0 -108px; } /изместване на фона/" |
В този случай ще са необходими тези данни за ширината и височината на изображението. Остава само да въведете получените данни в кода и бутонът "нагоре" за сайта ще бъде готов! Какво друго?
Бутон нагоре за сайта на Wordpress
За този CMS бутонът "Нагоре" може да бъде направен с помощта на плъгини, както и независимо.
Методът на плъгините е най-удобният и лесен за инсталиране, тъй като изисква само да щракнете върху бутона за инсталиране и да конфигурирате цялата функционалност в менюто на плъгините.
Изборът на последното трябва да се подхожда с повишено внимание, тъй като с него ще бъде лесно да се получи вирус на сайта. Най-популярният и доказан вариант е плъгин, наречен Превъртете обратно към началото. Можете да го изтеглите, като използвате стандартното търсене за приставки за Wordpress.
Това разширение имамножество функции и ще бъде много лесно да персонализирате бутона "нагоре" за сайт на Wordpress. Изобщо не е необходимо да променяте всички стойности, трябва само да конфигурирате външния вид и местоположението на бутона на страницата на сайта.
Както можете да видите, настройката на бутона нагоре с плъгини е много лесна. Но има един важен нюанс, който е, че всеки инсталиран плъгин зарежда CMS. Това може да повлияе на скоростта на интернет ресурса. Ето защо повечето собственици на сайтове се опитват да правят всички промени директно в кода, а не с помощта на разширения на трети страни. Можете да направите бутон "нагоре" за HTML сайт, което ще сведе до минимум консумираните ресурси.
Преди да промените всички системни файлове на Wordpress, трябва да ги архивирате. След това можете да следвате всички стъпки, за да създадете свой собствен бутон, описани по-горе.
Бутон "нагоре" за Joomla
CMS Joomla също поддържа инсталирането на плъгини, като Wordpress. Най-успешната версия на бутона "нагоре" за сайт в Joomla 3 е разширение, наречено Top of the Page.
В този CMS всеки плъгин може да бъде инсталиран чрез "Extension Manager". За това ви трябва:
- изтеглете приставката в интернет;
- щракнете върху бутона "Преглед" в мениджъра на разширенията;
- изберете изтегления архив;
- щракнете върху "Изтегляне" и инсталирайте.
Сега трябва да го активирате в "Plugin Manager". За товатрябва да отидете в този раздел, да намерите приставката и да превключите състоянието й на „разрешено“.
Следващата стъпка е да конфигурирате всички параметри на разширението, като използвате същия раздел, където трябва да намерите "Основни параметри" на този плъгин от дясната страна.
Най-горе на страницата има следната функционалност:
- Run in/ administrator - активиране на опцията не само в интернет ресурса, но и в самия панел на Joomla CMS.
- Позиция за разкриване на бутона - колко пиксела трябва да превърти потребителят назад, за да се появи бутонът нагоре.
- Пропускане на текст на бутона - наличието на текст върху бутона.
- Винаги най-отгоре - страницата на сайта винаги ще се показва от върха. Когато използвате котви за превъртане до конкретно място на страницата, тази опция не е необходимо да бъде активирана.
- Гладко превъртане - прави превъртането на страницата по-гладко.
- Продължителност на превъртане - времето, след което страницата ще се премести напълно в началото.
- Scroll Transition - Добавя повече визуални ефекти към превъртането.
- Облекчаване на прехода - "отслабване" на движението към горната част на страницата.
- Link Location - местоположението на иконата. По подразбиране бутонът се намира в долния десен ъгъл.
- Използвайте стилове – индивидуален стил на бутона, който може да бъде зададен в полето по-долу. Ако превключите на отрицателна стойност, тогава всички настройки на стила ще бъдат взети от активната тема на сайта.
- Стил на връзката - поле за въвеждане на параметрите на стила на бутона.
За да персонализирате стила на бутона "нагоре", трябва да имате поне минималенCCS знания. В противен случай трябва да превключите стойността на предпоследния параметър на "Не".
Друг важен нюанс е, че обичайният надпис върху иконата съдържа английския текст: Return to Top. Такъв текст не може да присъства в сайт на руски език, така че трябва просто да го деактивирате в параметрите на плъгина или да го промените на руски.
За да промените този надпис, трябва да отидете на сървъра на сайта, като използвате FTP или файловия мениджър, вграден в хостинга. След това в директорията "/administrator/language/en-GB/" трябва да намерите файл, наречен "en-GB.plg_system_topofthepage.ini".
Преди да промените текста, трябва да промените кодирането на този документ на UTF-8. Това ще направи нормалното показване на руски букви.
Следва намираме следния ред:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Връщане към началото"" |
и променете фразата в кавички на руски. Можете да използвате фрази като "Нагоре!", "Нагоре!" или "Нагоре!".
В края ще трябва да запазите модифицирания файл и да проверите за бутона "нагоре" за сайта на Joomla.
Бутон нагоре за Ucoz
Бутонът "нагоре" за сайта на Ucoz ще трябва да бъде направен чрез инжектиране на код, тъй като е невъзможно да се свържат плъгини за този CMS. Това обаче не изисква дълго проучване на системните файлове и търсене на необходимите редове, просто трябва да поставите малък код на правилното място.
За да ни инсталиратезадължително:
- отидете на "Контролен панел -> Дизайн -> Управление на дизайн (шаблони) -> Долна част на сайта;
- вмъкнете скрипта (можете да намерите на официалния уебсайт на проекта и ресурси на трети страни).
Заключение
След това ще се появи икона в долния десен ъгъл, премествайки потребителя в самия горен край на страницата.
Както можете да видите, настройването на бутона за връщане назад за която и да е от CMS не беше особено трудно. Можете да използвате както автоматизиран метод за инсталиране (приставки), така и ръчен. Последният вариант обаче остава най-подходящ, тъй като не влияе неблагоприятно върху работата на сайта.
Можете да използвате бутона "назад към началото" за HTML сайт, за да сведете до минимум консумацията на ресурси на сайта, тъй като голям брой разширения могат да имат отрицателно въздействие върху производителността на ресурса. Един плъгин с бутон "нагоре" няма да може да повлияе значително на времето за зареждане на страниците на сайта, но в повечето случаи потребителят има поне дузина плъгини, инсталирани в CMS. В този случай всеки плъгин може да повлияе неблагоприятно на производителността на страниците на сайта.
