Как сделать кнопки вверх и вниз: простым кодом!
Приветствую Вас друзья! Сегодняшняя тема статьи посвящена улучшению навигации, я на примере покажу: как сделать кнопки вверх и вниз на сайте/блоге... Делается это очень просто, внимательно читаем, копируем код в конце статьи и размещаем на Ваших ресурсах!
Читайте:
- 8 рабочих способов заработать на блоге
- Улучшаем форму комментирования на WordPress
- А Вы уже сделали почту на своем домене?
Чтобы реализовать возможность скроллинга на сайте в виде кнопки вверх и вниз, нам потребуется подключить кое-какие скрипты, а именно, библиотеку jQuery, сам скрипт скроллинга и парочку DIV блоков.
Хм, слушайте, а Вам вообще известно для чего нужны эти кнопки вверх и вниз, да и сам скроллинг на сайте? Нет?! Хорошо, тогда я сейчас на своем личном примере, попробую объяснить их смысл.
Вот, к примеру, возьмем мой блог, на котором Вы сейчас находитесь, что мы можем увидеть?! Много интересных статей и большинство из них очень объемные. Прибавим к ним еще и комментариев соточку и будет вообще жесть =) Интересно, на сколько хватит колесика мышки и нервов у посетителя?!
Вот и напрашивается вывод, что сделав кнопки скроллинга вверх и вниз, облегчают посетителям навигацию по сайту/блогу! Вследствие чего довольный посетитель, который вернется к Вам снова и снова!
Раньше у меня была реализована, кстати, только кнопка - вверх. Было круто, прочитал статью и пару десятков комментариев, нажал кнопку, "ТЫЦ" и прокрутка в самый верх блога. Но почему я сделал так же прокрутку и вниз?!
Причина этому - комментарии и объемные статьи... Это еще терпимо когда их 10-30, но что если количество комментариев 100-300 и более? А у меня есть и такие статьи, например вот эта статья. Вот я и реализовал такую возможность и сейчас все "Тип-топ", для того чтобы прочитать последние комментарии достаточно нажать кнопку и "ТЫЦ" мы в самом низу блога...
ИНСТРУКЦИЯ: Как сделать кнопки вверх и вниз
Ладно, перехожу к сути, сейчас будем устанавливать и внедрять необходимые коды и скрипты. Готовы?! Поехали... В конце статьи, нужно скачать архив с необходимыми файлами и скриптами, а сейчас я более подробно расскажу чего и куда нужно поместить!
Первым делом пропишем библиотеку jQuery в шапке сайта, если она не подключена (последние версии библиотек смотрите тут):
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
Затем пропишите в шапке или в подвале сайта сам скрипт скроллинга кнопки вверх и вниз (я так вообще соединил все скрипты в один файл, и разместил его перед тегом </body>, но это другая история):
<script type='text/javascript' src="путь к скрипту/scroll-startstop.events.jquery.js"></script>
И нам осталось прописать Дивы и CSS стили для кнопок. Дивы размещаем перед закрывающимся тегом </body>
<div style="display:none;" class="nav_up" id="nav_up"></div>
<div style="display:none;" class="nav_down" id="nav_down"></div>
И CSS стили лучше пропишите в своем style.css в самом конце документа:
.nav_up {padding:7px;background-color:white;border:2px solid #555;position:fixed;background:transparent url(images/arrow_up.png) no-repeat top left;background-position:50% 50%;width:20px;height:20px;bottom:75px;opacity:0.7;left:40px;white-space:nowrap;cursor: pointer;}
.nav_down {padding:7px;background-color:white;border:2px solid #555;position:fixed;background:transparent url(images/arrow_down.png) no-repeat top left;background-position:50% 50%;width:20px;height:20px;bottom:30px;opacity:0.7;left:40px;white-space:nowrap;cursor: pointer;}
Скачать исходники
[sociallocker]
[/sociallocker]
Все нужные файлы, а так же инструкции о том, как сделать кнопки вверх и вниз, Вы найдете в скачанном архиве! Теперь можно наслаждаться навигацией по сайту для людей! Все просто правда?!
P.S.: Кстати следующая статья посвящена плагинам - подпишитесь на обновления блога! И скоро будет новый конкурс на блоге...