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

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

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

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

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

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

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

Встановлення кнопки «вгору» на будь-який сайт

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

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

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

<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>

$(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;});
});

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

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

<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;фільтр: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(http://alaev.info/wp-content/plugins/goupbutt/b-j-top.png) no-repeat 50% 11px;border-radius:7px;}

.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;фільтр: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(http://alaev.info/wp-content/plugins/goupbutt/b-j-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 стиль, який відповідає за закруглення країв блоку.

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

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

З повагою, Олександр Алаєв