Кнопка вверх, кнопка вниз, улучшаем навигацию блога.

Суббота, 3 марта 2012 г. | Рубрика: Плагины для блога
Приветствую Вас на своем блоге!

кнопка вверх

Когда занимаешься дизайном и раскруткой блога, приходится часто перемещаться вверх и вниз страницы. Когда мне надоело листать, я нашел реализацию прокрутки через кнопку вверх. Простой вариант "наверх", который можно увидеть у меня на страничке в блоге на WordPress - http://andercomp.ru, в самом низу меня не устроил. Но если кому надо, делается простым кодом -- Наверх.

Хочется, чтобы кнопка была всегда в поле видимости. Пока реализовал с помощью плагина прокрутку вверх. Сам рисунок пришлось рисовать самому, под свой дизайн, т.е. цвет дизайна. Через некоторое время сделаю движение страницы в обе стороны. На этом блоге стоит плагин, но сам внешний вид кнопок собираюсь переделать. Должно все быть красиво.

Плагин "gotopbottom" для MaxSite CMS можно найти через поиск. Для WordPress плагин называется "Кнопка Вверх", НО пришлось выковыривать лишний код вместе со ссылкой. Потом перенесу его в сам шаблон, а Вам рекомендую проверять плагины на вшивость!

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

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

Если нужен сам плагин, пишите, выложу отредактированный от лишних ссылок. А со временем, возможно, и с движением в обе стороны.

Обновление. Для сайта на wordpress нашел такой простой код. Ставится в footer, кнопочки находятся самостоятельно и прописываются в коде вместо img src="http://andercomp.ru/кнопка.png" . В итоге получаем кнопки вверх-вниз. Следующим исправлением в этом коде, я планирую кнопки сделать через css.

<div style= "position:fixed; right:0.1%; bottom:45%;" id="nav_up">
<img src="http://andercomp.ru/up.png" alt="В верх страницы" 
title="В верх страницы" border="0"/></div>
<div style= "position:fixed; right:0.1%; bottom:41%;" id="nav_down">
<img src="http://andercomp.ru/down.png" alt="В низ страницы " 
title="В низ страницы" border="0"/></div>
 
 
      <script type="text/javascript">
        jQuery(function() {
            var overelem = jQuery('body');
 
            jQuery('#nav_up').fadeIn('slow');
            jQuery('#nav_down').fadeIn('slow');  
 
            jQuery('#nav_down').click(
              function (e) {
 jQuery('html, body').animate({scrollTop: overelem.height()}, 800);
              }
            );
            jQuery('#nav_up').click(
              function (e) {
 jQuery('html, body').animate({scrollTop: '0px'}, 800);
              }
            );
            });
        </script>

Не забывайте поправлять код под СВОЙ сайт!


Понравилась статья? Поделитесь с друзьями!!
twitter.com facebook.com vkontakte.ru odnoklassniki.ru mail.ru ya.ru rutvit.ru blogger.com livejournal.ru yandex.ru

Комментариев: 15

  • 22-03-2012 в 12:22 | Аноним

    Приветствую подскажи как сделал стрелочки прокрутки вверх вниз на сайте ?

  • И снова здравствуйте! подскажи как настроить стрелочки верх вниз на сайте.?

  • 22-03-2012 в 13:07 | Андрей

    Добрый день. Тут вопрос сразу, какой движок сайта?

    А вообще, с помощью плагинов, описанных в статье.

    p.s. Мало кто задумывается, что вниз страница прокручивается с помощью банального нажатия на клавишу "пробел" grin

  • Не все так просто))))) Представим что клавы и мышки нет)))))

    Движок вордпресс.

  • 22-03-2012 в 15:00 | Андрей

    Вниз, я еще не реализовал, все времени нет, но на этой неделе собираюсь. Мне нравится, как это здесь сделано. А вверх, могу выложить плагин, который скачал и поправил. Как работает, можно посмотреть http://andercomp.ru

  • спасиб, но вверх кнопок валом, даже родной вордпресс плагин есть. попробовал работает, но это только половина делаsmirk

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

  • 22-03-2012 в 17:25 | Андрей

    Понятно. Тогда лови самый простой, что я нашел код. Все эти кнопки прокручивают до конца экрана.

  • чет код не увидел?

  • 25-03-2012 в 17:34 | Андрей

    Синий текст, зеленый фон grin

    Обновить страницу - Ctrl + F5 или просто F5

    Образец работы на http://andercomp.ru/

  • а понял, а как поправить код, чтоб плавно прокручивал, или по шагам как то, ну скажем "1-клик" 25% прокручивал?

  • 26-03-2012 в 21:17 | Андрей

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

  • привет, сделала все как написано, кнопки поправила, но они при нажатии не реагируют, помогите!!!!

  • причем перестает работать как только выключаю скачанный плагин Scroll to Top

  • 08-06-2012 в 20:25 | Андрей

    koshka

    Теперь по порядку.

    Сами кнопки (картинки) (http://andercomp.ru/up.png, нужно сменить путь к своим), дальше, где именно разместили сам код?

    Последнюю фразу не очень понял..

  • 08-06-2012 в 20:40 | Андрей

    Можно посмотреть работу скрипта -- http://andercomp.ru

    Он там чистый и собираюсь использовать на других блогах..

  • Оставьте свой комментарий.

    grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

    Простой комментарий. Впишите имя и капчу внизу

    Используйте нормальные имена. Ваш комментарий будет опубликован после проверки.


    Комментарий с аватаркой и ссылкой на Ваш сайт


      

    ИЛИ

    Имя и сайт используются только при регистрации

    Если вы уже зарегистрированы как комментатор или хотите зарегистрироваться, укажите пароль и свой действующий email. При регистрации на указанный адрес придет письмо с кодом активации и ссылкой на ваш персональный аккаунт, где вы сможете изменить свои данные, включая адрес сайта, ник, описание, контакты и т.д., а также подписку на новые комментарии.

    Авторизация MaxSiteAuth.

    (обязательно)

    Скопируйте набранный текст перед тем, как отправить, на всякий случай.
    ⇑ Наверх
    ⇓ Вниз