Последнее время я много где вижу классную кнопку «Вверх» на сайтах. Более того, сейчас многие шаблоны уже в стандартном своем варианте, без дополнительных настроек имеют эту кнопку, не всегда сразу заметную, но тем не менее…
Мне показалось – это довольно удобным и я решил поделиться с вами на тему как создать кнопку вверх для блога. А вы уже имеете такую кнопку на вашем блоге? Расскажите, как кнопка «Вверх» повлияла на вас и ваших читателей. Ведь на самом деле это кнопку как кнопка – ничего сверхестественного в ней нет. Разве что она очень помогает вам избавиться от прокрутки длинной ленты новостей.
Вот например у меня раньше было аж 12 постов на главной – представьте, сколько это нужно крутить. А сейчас еще стало модным пол статьи показывать на главной странице – так это вообще листать – не перелистать эту главную. Поэтому приходит на помощь кнопка Вверх – на неё нажал – и дома. Довольно практичное и удобное решение, как вы считаете?
Скрипт установки кнопки вверх
Этот простейший скрипт нужно поместить вниз вашей страницы (при желании конечно, можно поместить в любое место). Если вы используете движок и ваш сайт загружается частями, например низ страницы часто вызывается с помощью файла footer.php – то открываем именно этот файлик и туда вставляем вот этот код:
| 1 2 3 4 5 6 | <!— кнопка верх —> <a id=»toTop» href=»#»>Вверх <img src=»путь к картинке» border=»0″ alt=»» align=»absmiddle» /></a> $(function() { $(«#toTop»).scrollToTop(); }); |
После этого нам нужно сделать как-то красиво оформить кнопку, а где у нас красивости оформляются? Правильно – в таблицах стилей. Открываем нашу таблицу стилей (обычно это файл style.css) и вставляем туда следующий код:
| 1./* === TOP === */ 2.#toTop { 3.width: 100px; 4.background: #f1f1f1; 5.border: 1px solid #cccccc; 6.text-align: center; 7.padding: 5px; 8.position: fixed; 9.bottom: 10px; 10.right: 10px; 11.cursor: pointer; 12.color: #666666; 13.text-decoration: none; 14.} 15./* =============== */ |
На самом деле это самый удобный способ установки кнопки вверх без плагинов, хотя бы потому что вы сами знаете где и как выводится эта кнопка и что нужно изменить для того чтобы привести к нужному вам виду.
А теперь о более профессиональном подходе. В подарок всем вам предлагаю легкоустанавливаемый и ненавязчивый JQuery скрипт – «scroll to top».
С его помощью вы очень просто добавите исчезающую ссылку с анимирований прокруткой страницы вверх. Сразу отвечу на вопрос, который может у вас возникнуть: «Как это будет выглядеть в работе?». Когда посетитель вашего сайта будет просматривать верхнюю часть страницы, кнопка невидима, а появляться она будет только тогда, когда пользователь станет смещаться вниз просматриваемой страницы.
Данный сценарий очень изящен, вам необходимо просто вставить обычную ссылку.
Для установки вам необходимо произвести следующие действия:
Включить ваши JQuery скрипты можно, добавив этот код в страницы вашего сайта. Лучше добавить код в header.php, чтобы код подгружался на всех страницах:
| 1 | <script src=»js/jquery.scroll.pack.js» type=»text/javascript»></script> |
А чтобы добавить ссылку прокрутки на необходимую страницу, нужно добавить это:
| 1 | <a id=»toTop» href=»#»>^ Scroll to Top</a> |
Добавить приведенный ниже код между тегами: head и /head:
| 1 2 3 4 5 | $(«#toTop»).scrollToTop({ speed: «fast», ease: «easeOutBounce», start: 700 }); |
Появление кнопки возможно отрегулировать, для этого достаточно изменить параметр «start» (700 пикселей по умолчанию). Это нужно чтобы кнопка появлялась, когда пользователь сдвинулся с отправной точки (с верха страницы) и исчезала, когда пользователь на самом верху.
Чтобы уменьшить скорость прокрутки, в куске кода speed: «fast» попробуйте написать speed: «slow» – должно быть медленнее
Вот и все! Возможно, что для получения фиксированного позиционирования, будет необходимо добавить хаки для IE6. Но это уже в следующих статьях.
Установить кнопку вверх с помощью плагина
Пришло время облегчить вам жизнь и на радость ленивцам рассказать о том, как установить плагин на wordpress scrollToTop, для установки кнопки вверх на вашем сайте. Для того чтоб установить этот плагин, вам необходимо сначала его скачать.
После этого распаковать его и закачать плагин на свой сайт в папку /plugins/ соответственно.
Затем заходим в панель управления, активируем плагин и заходим в его настройки. В настройках нужно лишь указать путь к картинке, которая будет висеть в качестве самой кнопки на вашем сайте. Вот как будет выглядеть путь к вашей картинке:
| //site.ru/wp-content/plugins/scrolltotop/image/UP13.png |
— не забудьте заменить site.ru на адрес вашего сайта, а имя файла картинки, на ту которая вам понравится и подходит под ваш дизайн.
Другие параметры плагина можно не менять.
Вот и все кнопка вверх установлена. Теперь посетители вашего блога будут вам благодарны, за то что вы облегчили им навигацию на вашем сайте.
На самом деле есть и другие варианты установки этой кнопки, но я старался дать вам самые доступные.
