Бутонът "нагоре" за сайт: как да направите

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

За какво е това?

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

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

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

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

Използването на бутона за незабавно преместване в горната част на страницата прави удобството на играта по-удобно.

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

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

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

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

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

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

Изображение на бутон

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

За да подобрите външния вид на бутона, трябва да направите някои подобрения, а именно да направите спрайт, който ви позволява да комбинирате фоновите изображения на базата на CSS, като по този начин създавате анимация от тях.

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

За да започнете работа в прозореца на редактора, който се показва, изберете полето "Качване на изображение от компютър". Като пример, вземете образа на ракетата.

Ако размерите на избраната икона са твърде големи, тогава ще се изисква малка корекция на размерите. За да направите това, отидете в горното меню и изберете полето "Edit" и след "Free transformhell;"

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

Следващата стъпка е да създадете копие на слоя.

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

Сега трябва да направите горната снимка в черно и бяло. Това може да се извърши с помощта на елемента "Корекция" - "Хард / Насищане" в горното меню. За пълно обезцветяване, плъзгачът за насищане трябва да бъде настроен на -100. Това действие ще направи ефекта, че бутонът "Up" ще се превърне от черно-бяло в цвят, когато го задържите.

Последното докосване е премахването на излишното пространство около двете картини. За да направите това, изберете елемента "Изрязване" от лявото меню и изберете само две ракети в правоъгълника. За да изпълните изрязването, натиснете клавиша Enter.

Резултатът е изображение, в което няма излишно пространство. Ще е необходимо да запишете ширината и височината на полученото изображение, тъй като тези данни ще бъдат полезни в следващата стъпка.

За да спестите нуждата да кликнете върху "Файл" - "Save", където ляво под "My Computer" напишете името на изображението (само на английски клавиатурна подредба), изберете формат (в този случай - PNG) и натиснете "Да".

Файл с бутона нагоре

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

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

След това кликнете върху горното меню "File" - "Save ashellip;" и след това запишете кода във формат .js. След това можете да използвате този код в сайта си, като качите файловете и изображенията на скрипта, като използвате FTP връзка.

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

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

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

Най-често бутонът "нагоре" за сайта се намира в дъното ("сутерен").

В файла style.css на сайта трябва да въведете следния код:

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

Up бутон за Wordpress сайт

За този CMS бутонът "Up" може да бъде направен с помощта на приставки, както и самостоятелно.

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

При избора на последния трябва да се подхожда внимателно, тъй като заедно с него ще бъде възможно лесно да се получи вирус на сайта. Най-популярната и доказана опция е plug-in, наречена Scroll Back to Top. Можете да го изтеглите с помощта на стандартното търсене в Wordpress плъгин.

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

Както можете да видите, настройването на бутона "нагоре" с помощта на приставки е много лесно. Но има един важен нюанс, че всеки инсталиран приставка зарежда CMS. Това може да повлияе на скоростта на интернет ресурса. Ето защо повечето собственици на сайтове се опитват да изпълнят всички промени директно в кода, а не с помощта на разширения от трети страни. Можете да направите бутона "нагоре" за сайта в HTML, което ще сведе до минимум консумираните ресурси.

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

Кнока "нагоре" за Joomla

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

В този CMS, всеки плъгин може да бъде инсталиран чрез "Extension Manager". За да направите това, трябва:

• изтегляне на приставката в интернет;
• Кликнете върху бутона "Преглеждане" в разширения Manager;
• изберете изтегления архив;
• кликнете върху "Изтегляне" и инсталирайте.

Сега трябва да го активирате в "Plugin Manager". За да направите това, отидете в тази секция, намерете приставката и превключете състоянието й в "включено".

След това конфигурирате всички опции за разширение, като използвате същата секция, където трябва да намерите "Основните параметри" на този плъгин от дясната страна.

Най-горе на страницата има следната функционалност:

• Стартирайте в / администратор - активирайте опцията не само в интернет ресурса, но и в самата CMS Joomla.
• Бутон Откриване на позицията - колко пиксела потребителят трябва да превърти назад, за да се появи бутона "нагоре".
• Текст за изтриване на бутон - текстът на бутона.
• Винаги нагоре - страницата на сайта винаги ще се показва от самото начало. Когато използвате "анкери", за да превъртите до определено място на страницата, не е необходимо тази опция да бъде активирана.
• Гладко превъртане - прави страницата по-гладка.
• Продължителност на превъртане - времето, през което страницата се придвижва напълно към началото.
• Превъртане превъртане - добавя превъртане за големи визуални ефекти.
• Преходно облекчаване - "облекчаване" на преместването в горната част на страницата.
• Местоположение на връзката - местоположението на иконата. Стандартно бутонът се намира в долния десен ъгъл.
• Използвайте стилове - индивидуалният стил на бутона, който може да бъде зададен в полето по-долу. Ако преминете към отрицателна стойност, всички настройки за стила ще бъдат взети от темата на активния сайт.
• Стил на връзката - поле за въвеждане на настройките ви за стил на бутоните.

За да персонализирате стила на бутона "нагоре", трябва да имате поне минимални познания за УСВ. В противен случай е необходимо стойността на предпоследния параметър да се промени на "Не".

Друг важен нюанс е, че обичайният надпис на иконата съдържа английския текст: Върни се нагоре. На сайт на руски език такъв текст не може да присъства, така че просто го изключвате в настройките на плъгина или го променяте на руски език.

За да промените този надпис, трябва да отидете на сървъра на сайта, като използвате FTP или вграден хостинг файлов мениджър. След това в директорията "/ administrator / language / en-GB /" трябва да намерите файл, наречен "en-GB.plg_system_topofthepage.ini".

Преди да промените текста, трябва да промените кодирането на този документ на UTF-8. Това ще направи нормално показване на руски букви.

След това намираме следния ред:

и променете фразата в кавички на руски език. Можете да използвате фрази като "Нагоре", "В началото!" Или "Нагоре!".

В крайна сметка ще трябва да запазите променения файл и да проверите за бутона "нагоре" за сайта в Joomla.

Бутон "Нагоре" за Ucoz

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

За да инсталирате, трябва:

• отидете на "Контролен панел -> Дизайн -> Управление на дизайна (шаблони) ->
• въведете сценария (може да се намери на официалния сайт на проекта и ресурси на трети страни).

заключение

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

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

Можете да използвате бутона "нагоре" за сайт в HTML, за да минимизирате използването на ресурси на сайта, тъй като голям брой разширения могат да имат отрицателно въздействие върху ефективността на ресурсите. Единият бутон "нагоре" не може значително да повлияе на времето за зареждане на страниците на сайта, но в повечето случаи потребителят има поне десетина приставки, инсталирани в CMS. В този случай всеки плъгин може да повлияе отрицателно на ефективността на страниците на сайта.