Функция като бутона "нагоре" за сайта прави интернет ресурса по-удобен за посетителите си. Той помага лесно да се придвижвате от всяка точка на страницата до върха му. Това е просто необходимо за онлайн магазини и сайтове с големи статии, изискващи дълъг превъртане надолу.

Защо е необходимо

В момента, на повечето сайтове, няма функция като бутона "нагоре" и няма нищо лошо в това. Но използването му може да донесе много ползи както на онлайн ресурса, така и на неговите посетители.

Ползи за посетителите

Често, когато интернет страница с ресурси е силно натоварена с информация, когато информационна статия заема много място и трябва да превърта страницата надолу с колелото на мишката. В допълнение към това, в края на статията може да има много коментари към нея. Когато посетител прочете статия, трудно е да превъртите страницата надолу, но когато текстът свърши и трябва да се движите нагоре, започва да се уморява малко. Повечето хора просто ще лениво носят дълъг свитък и просто ще затворят сайта, вместо да продължат да се разхождат през неговите пространства. Използването на бутона за незабавно преместване в горната част на страницата прави времето за прекарване на сайта по-удобно.

Ползи от онлайн ресурс

Положителните страни за самия ресурс се основават на минали фактори, тъй като опростеното движение на място подобрява поведенческите фактори, тъй като всичкипосетителите ще бъдат по-активни в действията си и ще преминат към други страници.


По този начин дадените поведенчески фактори влияят на съотношението на всички търсачки към обекта и водят до подобряване на мястото на изпълнение на търсенето.

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

Да отидем по-далеч. Бутонът за превъртане нагоре за сайта към която и да е CMS винаги може да се направи самостоятелно, като се вземат само няколко прости стъпки:

създаване на изображение;

създаване на скриптове;

създаване на стил на бутони;

добавяне към обекта.

Картина на бутона

За да добавите бутона "нагоре" на сайта, първо трябва да направите самата икона, когато щракнете върху коя страница е зададен потребителят. За това можете да използвате готови варианти, сред които винаги можете да изберете най-подходящия. За да подобрите вида на бутона, трябва да направите някои подобрения, а именно да направите спрайт, който позволява на CSS да комбинира фоновите изображения, като по този начин създава анимация от тях. За графични работи можете да използвате всеки редактор. Но най-удобната опция е онлайн услугата PIXLR, тъй като изтеглянето на нищо не е необходимо и можете да ги използвате директно в браузъра. За да започнете работа в прозореца на редактора, трябва да изберете полето "Качване на изображение от компютър". Например, вземете ракетно изображение. Ако размерът на избраната икона е твърде голям, тогава трябва да направите малка корекция на размера. За да направите това, отидете в горното меню и изберете в полето "Редактиране" и след това«Свободна трансформация» След това заедно със снимката има специални маркери, които ги преместват, можете да промените размера на изображението. За да запазите пропорции, можете да използвате клавиша Shift, като натиснете бутона, за да преместите сините маркери. В края на тези действия се появява изображение на ракета.
Следващата стъпка е да се създаде копие на слоя. Сега трябва да преместите ракетния образ от новия слой малко нагоре. За да направите това, е удобно да използвате движещия се инструмент, разположен във втората колона на лявото меню и стрелката нагоре на клавиатурата. Сега трябва да направите горната картина черно-бяла. Това може да се направи с помощта на елемента "Корекция" - "Тон /Насищане" в горното меню. За пълно обезцветяване плъзгачът "Saturation" трябва да приеме стойността -100. Това ще ви позволи да направите ефект, при който бутонът "Нагоре" ще се преобразува от черно-бяло в цвят, когато се намира върху него. Последното докосване е да премахнете ненужното пространство около две снимки. За да направите това, изберете елемента "Подрязване" от менюто отляво и изберете само две ракети в правоъгълника. За да извършите подрязването, натиснете клавиша Enter. Появи се изображение, в което няма прекомерно свободно пространство. Трябва да напишете стойността на ширината и височината на полученото изображение, тъй като тези данни ще бъдат полезни в следващата стъпка. За да запишете, трябва да кликнете върху "Файл" - "Запази", където в ляво "Моят компютър" запишете името на изображението (само английското оформление), изберете формата (в този случай - PNG) и натиснете бутона Да.

Файл със скриптбутони "нагоре"

Писането на скрипт в този случай не е задължително. Можете да използвате публичната опция, въвеждайки някои корекции в готовия код. За да направите това, изтеглете всеки редактор на код. Най-популярната и освен безплатната версия е Notepad ++. Веднъж инсталиран, трябва да копирате и поставите целия код в него:



След това кликнете върху „Файл“ - „Запази като“ в горното меню и след това запишете кода във формат .js. След това можете да използвате този код на сайта си, като качвате файлове с графични файлове с FTP връзка.

Инсталиране на сайта

За да настроите бутона за превъртане нагоре за сайта, трябва да поставите кода на правилното място. Трябва да го въведете преди маркера.

Създаване на стил на бутони в CSS

Често бутонът "нагоре" за даден сайт се намира в долната част ("сутерен"). Файлът style.css на уебсайта е необходим за въвеждане на следния код:

"/* бутон нагоре * /. ScrollTop {
background: url ('images /up.png') 0 0 без повторение; път на изображението * /
ширина: 39px; /* ширина на бутона * /
височина: 96px; /* 50% височина на бутон * /
отдолу: 5px; 39) наляво: 89%; /* изместване наляво * /
}
.scrollTop: hover {background-position: 0 -108px;} /* background shift * /"


В този случай ще ви трябват данните за ширината и височината на изображението. Всичко, което трябва да направите, е да въведете получените данни в кода и бутона "нагоре" за сайта ще бъде готов! Какво друго?

Бутон "Up" за сайт на Wordpress

За тази CMS, бутонът "Up" може да се извърши с помощта на добавки, както и от вас.Методът на плъгина е най-удобен и лесен за инсталиране, тъй като изисква само да кликнете върху бутона за инсталиране и да конфигурирате цялата функционалност в менюто на приставката. Преди да изберете последния, трябва да бъдете внимателни, тъй като с него ще можете лесно да закупите вирус на сайта. Най-популярната и доказана опция е плъгинът Scroll Back To Top. Можете да го изтеглите, като използвате стандартното търсене на Wordpress plugin. Това разширение има множествена функционалност и ще бъде много лесно да се индивидуализира бутонът "нагоре" за сайт в Wordpress. Не е необходимо да променяте всички стойности, само трябва да конфигурирате типа и местоположението на бутона на страницата на сайта. Както виждате, инсталирането на бутона "нагоре" с плъгини е много просто. Но има един важен нюанс, че всеки инсталиран плъгин зарежда CMS. Това може да повлияе на ефективността на онлайн ресурс. Ето защо повечето собственици на сайтове се опитват да внедрят всички промени директно в кода, вместо да използват разширения на трети страни. Можете да направите бутона "нагоре" за сайта в HTML, което намалява консумираните ресурси. Преди да промените всички системни файлове на Wordpress, уверете се, че са архивирани. След това можете да управлявате всички стъпки, за да създадете свой собствен бутон, описан по-горе.

Завърти "за" за Joomla

CMS Joomla също поддържа инсталирането на приставки, като Wordpress. Най-успешната версия на бутона "нагоре" за сайта на Joomla 3 е разширение, наречено "Топ" на страницата. В тази CMS всяка добавка може да бъде инсталирана чрез "Мениджър"Разширения. " За да направите това, трябва:

да изтеглите плъгина в интернет;

Щракнете върху бутона Преглед в Мениджъра на разширенията;

изберете изтегления архив;

Щракнете върху "Изтегли" и инсталирайте.

Сега трябва да активирате в "Мениджър на Plugin". За да направите това, трябва да отидете в този раздел, да намерите приставката и да превключите състоянието му на "включено". Следното е конфигурацията на всички опции за разширения, използвайки същия раздел, където трябва да намерите "Основни настройки" на този плъгин от дясната страна. Нагоре на страницата има следната функционалност:

Run in /administrator - Активирайте опцията не само в интернет ресурса, но и в самия панел Joomla CMS.

Бутон Reveal Position - колко пиксела трябва да се върне на потребителя, за да се появи бутонът "нагоре".

Текст на бутон за изписване - Наличие на текст върху бутон.

Винаги отгоре - страницата на сайта винаги ще се показва от самото начало. Когато използвате котви, не е необходимо да активирате тази опция, за да преминете към определено място на дадена страница.

Smooth Scroll - прави превъртането на страницата по-гладко.

Продължителност на превъртане - времето, през което страницата се премества изцяло нагоре.

Превъртане на превъртане - добавя превъртане до големи визуални ефекти.

Преходно облекчаване - „отслабване“, преместване в горната част на страницата.

Местоположение на връзката - местоположението на иконата. По подразбиране бутонът се намира в долния десен ъгъл.

Use Styles е стил на отделен бутон, който може да бъде зададен в полето по-долу. Ако се премине към отрицателна стойност, тогава ще бъдат взети всички стилови таблициактивна тема на сайта.

Стил на връзката е поле за въвеждане на настройки за стила на бутоните.

За да конфигурирате самостоятелно стила на бутона "нагоре", трябва да имате поне минимално CCS познание. В противен случай е необходимо да се превключи стойността на последния параметър на "Не". Друг важен нюанс е, че обичайният надпис върху иконата съдържа английски текст: Връщане в началото. В сайта на руски език, такъв текст не може да бъде, така че просто го изключете в настройките на плъгина или го променете на руски. За да промените тази вложка, трябва да влезете в сървъра на сайта с помощта на вградения хостинг на FTP или файловия мениджър. След това директорията "/administrator /language /en-GB /" трябва да намери файл, наречен "en-GB.plg_system_topofthepage.ini". Преди да промените текста, трябва да промените кодирането на този документ на UTF-8. Това ще позволи нормално показване на руски букви. След това намираме следния ред:

"PLG_SYS_TOPOFTHEPAGE_GOTOTOP =" Връщане в началото ""

и променете фразата в кавички на руски. Можете да използвате фрази като "Up!", "Begin!" Или "Up!". Накрая трябва да запишете модифицирания файл и да проверите наличието на бутон "нагоре" за сайта на Joomla.

Бутон "Up" за Ucoz

Бутоните "нагоре" за сайта на Ucoz трябва да бъдат направени с помощта на реализацията на кода, тъй като не е възможно да се свържат плъгини за тази CMS. Въпреки това, за да направите това, не е нужно да се изследват дълго системните файлове и да се търсят необходимите редове, просто трябва да поставите малък код на правилното място. За да инсталирате, ще ни трябва:

Отидете в контролния панел - & gt;Преглед - & gt; Управление на дизайна (шаблони) - & gt; Долна част на площадката;

вмъкнете скрипта (може да бъде намерен на официалния сайт на проекта и ресурси на трети страни).

Заключение

След това в долния десен ъгъл се появява икона, която премества потребителя в горната част на страницата. Както можете да видите, инсталирането на бутона "Up" за всяка CMS не е особено трудно. Можете да използвате както автоматизирания метод на инсталиране (plug-ins), така и ръчния. Последният вариант обаче остава най-подходящ, тъй като не оказва отрицателно въздействие върху работата на обекта. Можете да използвате бутона "нагоре" за сайта в HTML, за да увеличите максимално потреблението на ресурсите на сайта, тъй като голям брой разширения може да има отрицателно въздействие върху ефективността на ресурса. Един плъгин с бутон нагоре не може да повлияе значително на времето за зареждане на страниците на сайта, но в повечето случаи потребителят има поне десет приставки, инсталирани в CMS. В този случай всеки плъгин може да повлияе негативно на ефективността на страниците на сайта.