Всем привет, последнее время я много где вижу классную кнопку “Вверх” на блогах. Более того, сейчас многие шаблоны уже в стандартном своем варианте, без дополнительных растроек имеют эту кнопку, не всегда сразу заметную, но тем не менее…

Мне показалось – это довольно удобным и я решил поделиться с вами на тему “как создать кнопку вверх для блога”. А вы уже имеете такую кнопку на вашем блоге? Расскажите, как кнопка “Вверх” повлияла на вас и ваших читателей. Ведь на самом деле это кнопку как кнопка – ничего сверхестественного в ней нет. Разве что она очень помогает вам избавиться от прокрутки длинной ленты новостей.

Вот например у меня раньше было аж 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/* === TOP === */
   #toTop {
   width: 100px;
   background: #f1f1f1;
   border: 1px solid #cccccc;
   text-align: center;
   padding: 5px;
   position: fixed;
   bottom: 10px;
   right: 10px;
   cursor: pointer;
   color: #666666;
   text-decoration: none;
   }
   /* =============== */

На самом деле это самый удобный способ установки кнопки вверх без плагинов, хотя бы потому что вы сами знаете где и как выводится эта кнопка и что нужно изменить для того чтобы привести к нужному вам виду.

Этот способ вполне подойдет для установки кнопки на сайты на ucoz (мы кстати даже видео уроки про ucoz обсуждали), плавность перехода достигается скриптом, который вы можете скачать прямо у меня.

А теперь о более профессиональном подходе. В подарок всем вам предлагаю легкоустанавливаемый и ненавязчивый 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 , для установки кнопки вверх на вашем сайте. Для того чтоб установить этот плагин, вам необходимо сначала его скачать. Скачать его можно на выбор (версии разные):

Скачать с Monetablog

Скачать с WordPress #1

Скачать с WordPress #2

После этого распаковать его и закачать плагин на свой сайт в папку /plugins/ соответственно.

Затем заходим в панель управления, активируем плагин и заходим в его настройки. В настройках нужно лишь указать путь к картинке, которая будет висеть в качестве самой кнопки на вашем сайте. Вот как будет выглядеть путь к вашей картинке:

http://site.ru/wp-content/plugins/scrolltotop/image/UP13.png

- не забудьте заменить site.ru на адрес вашего сайта, а имя файла картинки, на ту которая вам понравится и подходит под ваш дизайн.

Другие параметры плагина можно не менять.

Вот и все кнопка вверх установлена. Теперь посетители вашего блога будут вам благодарны, за то что вы облегчили им навигацию на вашем сайте.

На самом деле есть и другие варианты установки этой кнопки, но я старался дать вам самые доступные. Если у вас возникнут вопросы – задавайте. Хотя эта тема довольно простая и я не думаю что вопросы буду возникать. Кстати, хочу услышать ваше мнение в комментариях, а чтобы не пропускать в ближайшее время обновления – подписывайтесь на обновления блога

С уважением, Тумилович Денис.