Опубліковано: 22 cічня 2013 / Оновлене: 31 cічня 2014

Привіт друзі. Сьогодні я продовжую ділитися з вами корисними скриптами, а якщо говорити конкретно, то я розповім вам історію про появу на моєму блозі кнопки вгору. Мене вже давно просили написати, як зробити таку ж кнопочку, але мені було шкода «палити контору», але сьогодні я раптом передумав ...

Так-то нічого нового я не розповім, адже в мережі можна знайти ще 100500 статей про те, як зробити кнопку вгору для сайту, на цьому б і варто було закінчити сьогоднішній пост, якби не одне АЛЕ! Моя кнопка незвичайна, не така як у всіх - у мене кнопка від самого Яндекса ... зараз-зараз я все розповім :)

Якось спочатку так склалося, що при веденні блогу я вирішив відмовитися від посторінкового розбивки коментарів до постів. Не знаю чому, може не хотів плодити зайвих сторінок, а може і не вірив, що у мене може бути більше 50 коментарів до одного посту, так чи інакше, свою думку я не змінив досі - все коментарі до постів виводяться однією сторінкою. Однак, от халепа, деякі пости на моєму блозі набрали вже більше 500 коментарів, і це не дивлячись на те, що я раз в місяць їх підчищати. Коротше, це була передісторія - а результат такий, що довелося додати на блог кнопку вгору. В результаті навігація по довгих постів з коментарями значно спростилася.

Кнопку або сам скрипт я навіть не шукав, все це саме попалося мені на очі - на одному з сервісів Яндекса, на жаль, не пам'ятаю на якому. Але роздумувати я не став - раз дають треба брати!

Мені дуже подобається вислів «Хороші художники копіюють, а геніальні - крадуть», але ось я хоч і не художник, але краду геніально :) Так, кнопку, яку ви бачите на моєму блозі, я поцупив з Яндекса. Я не хотів користуватися чиїмись інструкціями і скриптами, вони все якісь стрьомні, а тут раз вже сам Яндекс користується даним скриптом, значить він кращий.

NB: це не перша річ, яку я «запозичив» у Яндекса, місяць назад я виявив на одній з промо-сторінок «секретні» кнопки шаринга, про що писав на форумі .

15 хвилин колупаній вихідного коду і все вихідні у мене! Але я вас врятую від цього неподобства, з моєї інструкцією ви зможете всього за 2 хвилини отримати красиву і працюючу кнопочку!

Дійсно, додати даний скрипт можна без проблем на будь-який сайт або будь-яку CMS, та що там - хоч на чистий html хоумпейдж. Найголовніше і єдина умова - у вас повинна бути підключена jQuery бібліотека.

Оригіналів вихідного коду Яндекса я не зберіг, так як при додаванні на блог я відразу міняв деякі стилі і настройки. Але повірте, в процесі інтеграції все стало тільки краще!
Отже, приступимо до встановлення:

Крок 1. Додаємо JavaScript в шаблон сайту, перед закриває тегом </ head>

<Script type = "text / javascript"> $ (document) .ready (function () {$ (window) .scroll (function () {if ($ (this) .scrollTop ()> 0) {$ ( '# scroller '). fadeIn ();} else {$ (' # scroller '). fadeOut ();}}); $ (' # scroller '). click (function () {$ (' body, html '). animate ({scrollTop: 0}, 400); return false;});}); </ script>

Наприклад, для WordPress треба буде редагувати файл шаблону header.php, а в DLE необхідно буде додавати код в шаблон main.tpl.

Крок 2. Додаємо html-код в шаблон сайту перед закриває тегом </ body>

<Div id = "scroller" class = "b-top" style = "display: none;"> <span class = "b-top-but"> наверх </ span> </ div>

Знову ж таки, в WordPres треба редагувати файл footer.php, а для DLE знову main.tpl.

Розумні і знаючі люди ( Паша Пафнутій і Діма Dimox ) Радять позбутися від цього кроку, тому що це не jQuery, а щоб все було «по понятіям» треба вчинити так, як описано в коментарі # Comment-13676 .

Крок 3. Додаємо CSS-стилі блоку і кнопки вгору в файл style.css (назва файлу style.css у вас може бути і іншим, але це не важливо, додайте код в будь-який файл стилів, який підключається до сайту).

.b-top {z-index 2600; position: fixed; left: 0; bottom: 90px; width: 34%; margin-left: 50%; opacity: 0.5; filter: alpha (opacity = 50);}. b-top: hover {opacity: 1; filter: alpha (opacity = 100); cursor: pointer;} .b-top-but {z-index 2600; position: absolute; display: block; left: 56px; bottom : 0; margin: 0 0 0 100%; padding: 32px 12px 4px; color: white; background: # D8D5C2 url (https://alaev.info/wp-content/plugins/goupbutt/bj-top.png) no-repeat 50% 11px; border-radius: 7px;}

Як бачите, я навіть url фонової картинки зі стрілкою не став міняти, залишив подгрузку з яндексовского серверів. На Яндексі пропала картинка, вказав шлях до картинки на своєму сервері, а вам рекомендую її зберегти до себе, буде надійніше.

Що тут можна налаштувати і змінити під себе:

• bottom: 90px; - зміщення блоку з кнопкою щодо низу сторінки;
• width: 34%; margin-left: 50%; - ось з цими параметрами вам доведеться поворожити, тому що чіткої інструкції тут бути не може. Дані значення я виявив експериментально, перевіряючи положення кнопки на різних дозволах екрану саме для мого шаблону на блозі. Чого і вам рекомендую;
• padding: 32px 12px 4px; - за допомогою цих значень ви можете регулювати розмір блоку з кнопкою, керуючи відступами щодо напису «вгору». 32px - відступ зверху, 12px - відступи зліва і справа, 4px - відступ знизу;
• color: white; - колір напису «вгору»;
• border-radius: 7px; - це css3 стиль, який відповідає за закруглення країв блоку.

Все готово, сподіваюся, нічого не забув. Шалено просто і настільки ж корисно для сайтів з дуже довгими сторінками.

Дякую за увагу, друзі. Користуйтеся скриптом, задавайте питання в коментарях, і пишіть свої пропозиції та побажання.

З повагою, Олександр Алаев
Опубліковано: 22 cічня 2013