Кнопка "уверх" для сайта: як зрабіць

Такая функцыя, як кнопка "уверх" для сайта, робіць інтэрнэт-рэсурс больш зручным для яго наведвальнікаў. Яна дапамагае з лёгкасцю перамясціцца з любой кропкі старонкі ў яе верхнюю частку. Гэта проста неабходна для інтэрнэт-крам і сайтаў з вялікімі артыкуламі, якія патрабуюць доўгай пракруткі ўніз.

Для чаго гэта неабходна

На дадзены момант на большасці сайтаў такой функцыі, як кнопка «ўверх», няма, і ў гэтым няма нічога крытычнага. Але яе выкарыстанне можа прынесці шмат плюсаў як для інтэрнэт-рэсурсу, так і для яго наведвальнікаў.

Карысць для наведвальнікаў

Часта бывае, калі старонка інтэрнэт-рэсурсу моцна нагружаная аб'ёмам інфармацыі, калі інфармацыйная артыкул займае шмат месца і даводзіцца пракручваць старонку ўніз пры дапамозе колца мышы. У плюс да гэтага, у канцы артыкула можа прысутнічаць мноства каментароў да яе.

Калі наведвальнік чытае артыкул, нічога стомнага ў прагортцы ўніз старонкі няма, але калі тэкст падышоў да канца і трэба перамяшчацца ўверх, то гэта пачынае трохі стамляць. Большасці людзей будзе проста лянота весці доўгую прагортку, і яны проста зачыняць сайт, замест таго каб яшчэ прагуляцца па яго прасторах.

Выкарыстанне кнопкі для імгненнага перамяшчэння да версе старонкі робіць баўленне часу на сайце больш зручным.

Карысць для інтэрнэт-рэсурсу

Станоўчыя бакі для самога рэсурсу зыходзяць з мінулых фактараў, бо спрошчанае перамяшчэнне па сайту паляпшае паводніцкія фактары, так як усе наведвальнікі будуць больш актыўныя ў сваіх дзеяннях і пяройдуць на іншыя старонкі.

Тым самым дадзеныя паводніцкія фактары ўплываюць на стаўленне ўсіх пошукавікаў да сайта і прыводзяць да паляпшэння месцы ў пошукавай выдачы.

Як зрабіць кнопку "уверх" на сайце самастойна

Разбіраемся далей. Кнопку пракруткі уверх для сайта на любы з CMS заўсёды можна зрабіць самастойна, выканаўшы толькі некалькі вельмі простых крокаў:

• стварэнне малюнка;
• стварэнне скрыпту;
• стварэнне стылю кнопкі;
• даданне на сайт.

малюнак кнопкі

Каб дадаць кнопку "уверх" на сайце, для пачатку спатрэбіцца зрабіць саму абразок, пры націску на якую карыстальнік перамесціцца ўверх старонкі. Для гэтага можна выкарыстаць гатовыя варыянты, сярод якіх заўсёды можна падабраць найбольш прыдатны.

Каб палепшыць выгляд кнопкі, неабходна зрабіць некаторыя дапрацоўкі, а менавіта зрабіць спрайт, які дазваляе на аснове CSS аб'яднаць фонавыя малюнкі, тым самым стварыўшы з іх анімацыю.

Для графічных прац можна скарыстацца любым рэдактарам. Але самым зручным варыянтам будзе онлайн-сэрвіс PIXLR, так як спампоўваць тут нічога не трэба і можна карыстацца ім прама ў браўзэры.

Для пачатку працы ў якое з'явілася акне рэдактара трэба выбраць полі «Загрузіць малюнак з кампутара». У якасці прыкладу возьмем выява ракеты.

Калі габарыты абранай абразкі занадта вялікія, то спатрэбіцца зрабіць невялікую карэкціроўку памераў. Для гэтага неабходна перайсці ў верхняе меню і выбраць полі «Рэдагаваць», а пасля «Free transform ...»

Далей побач з малюначкам з'яўляюцца спецыяльныя маркеры, перамяшчаючы якія, можна змяніць памер малюнка. Для захавання прапорцый карыстайцеся або Shift, заціснуўшы якую, трэба перамяшчаць блакітныя маркеры. У канцы дадзеных дзеянняў атрымліваецца малюнак ракеты.

Наступнае дзеянне - стварэнне копіі пласта.

Зараз неабходна перамясціць карцінку ракеты з новага пласта трохі ўверх. Для гэтага будзе зручна выкарыстоўваць інструмент перамяшчэння, які размяшчаецца ў другой калонцы левага меню, і стрэлку «ўверх» на клавіятуры.

Зараз трэба зрабіць верхнюю карцінку чорна-белай. Гэта можна зрабіць пры дапамозе пункта «Карэкцыя» - «Каляровы тон / Насычанасць» ў верхнім меню. Для поўнага абескаляроўвання паўзунок «Насычанасць» павінен прыняць значэнне -100. Дадзенае дзеянне дазволіць зрабіць эфект, пры якім кнопка «Уверх» будзе ператварацца з чорна-белай у каляровую пры навядзенні на яе.

Апошні штрых - выдаленне лішняга прасторы вакол двух малюнкаў. Для гэтага выбіраем пункт «Абразанне» з левага меню і вылучаем ў прастакутнік толькі дзве ракеты. Для здзяйснення абрэзкі націскаецца клавіша Enter.

Атрымалася малюнак, у якім няма лішняга вольнай прасторы. Спатрэбіцца запісаць значэння шырыні і вышыні атрыманай карцінкі, бо гэтыя дадзеныя будуць карысныя на наступным кроку.

Для захавання трэба націснуць на «Файл» - «Захаваць», дзе ў левым пункце «Мой кампутар» запісваем імя малюнка (толькі ангельская раскладка), выбіраем фармат (у дадзеным выпадку - PNG) і націскаем кнопку «Так».

Файл са скрыптам кнопкі «ўверх»

Пісаць скрыпт у дадзеным выпадку не трэба. Можна будзе скарыстацца агульнадаступным варыянтам, уносячы ў гатовы код некаторыя папраўкі.

Для гэтага спатрэбіцца спампаваць любы рэдактар кода. Самы папулярны і да таго ж бясплатны варыянт - гэта Notepad ++. Пасля яго ўстаноўкі трэба скапіяваць і ўставіць у яго ўвесь дадзены код: