Создание сайта на WordPress — что может быть проще!
Как сделать кнопки вверх и вниз: простым кодом!
Рубрика: Все для вебмастера

Как сделать кнопки вверх и вниз: простым кодом!

56 комментариев   

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

Читайте:

Чтобы реализовать возможность скроллинга на сайте в виде кнопки вверх и вниз, нам потребуется подключить кое-какие скрипты, а именно, библиотеку 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.: Кстати следующая статья посвящена плагинам — подпишитесь на обновления блога! И скоро будет новый конкурс на блоге...


Савельев Владимир Александрович
С уважением, Владимир Савельев
Премиум курсы от webformyself

Премиум-уроки от клуба webformyself

Это новый революционный продукт в области обучения сайтостроительству! Все лучшие видео-уроки собраны в одном месте и разделены на категории: WordPress, Joomla, PHP, HTML, CSS и JavaScript... База постоянно пополняется и уже сейчас в ней более 200 уроков! Всего за один год - Вы сможете стать опытным веб-мастером "с полного нуля"!
Подробнее

Прочтите еще:
Обсуждение статьи: 56 комментариев
  1. Никита Волков 2014-12-15 в 16:05 

    Ничего себе. И вправду не сложно совсем! Знать бы ещё как стили менять))

    Ответить
    • Виталий Охрименко 2015-09-25 в 10:18 

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

      Ответить
      • Игорь 2015-09-26 в 23:26 

        Виталь,ты так расписал легко.

        Не многие это поймут. ;-)

  2. Максим 2014-12-15 в 16:24 

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

    И это называется ЮзабИлити, так для информации))

    Ответить
    • Игорь 2015-05-31 в 20:44 

      Просто нужно дополнительно паузу поставить и скорость прокрутки убавить.

      Ответить
    • Саня Сабегатулин 2015-06-30 в 10:48 

      Колесико для Володиных конкурсов не вариант. Когда к статье огромное количесто комментов замучаешься колесико листать.

      Ответить
      • Екатерина 2015-06-30 в 22:08 

        Стрелочки вверх и вниз существенно экономят время.

  3. Владимир 2014-12-15 в 16:42 

    Да Максим ты абсолютно прав на счет мыши. Но есть одно НО! Основная масса пользователей интернета не используют такую функцию с помощью колесика мышки.

    А за ошибку в Юзабилити спасибо, торопился пропустил :roll:

    Ответить
  4. Татьяна 2014-12-15 в 19:56 

    Мне нравится, когда есть кнопки вверх/вниз. Особенно удобны при комментировании: не надо долго крутить колесико доя того, чтобы добраться вниз страницы и написать комментарий или быстро вернуться к статье.

    Ответить
    • Владимир Савельев 2014-12-15 в 20:02 

      Я с тобой согласен Татьяна очень удобно! Просто тыкнуть и все :razz:

      Ответить
      • Игорь 2015-05-31 в 20:45 

        Так же как и вверх,быстренько добежать,но тормозок все равно не помешал бы.

      • Саня Сабегатулин 2015-06-30 в 10:49 

        Игорь, это уже с помощью колесика :grin:

      • Игорь 2015-09-26 в 23:27 

        Да не Саня,колесико это уже не то.

        Но все же приходится и им скролить

  5. Ольга 2014-12-16 в 06:04 

    Нужно подробно прочитать. У меня на 2 сайтах нет такой кнопки, а она очень нужна.

    Ответить
    • Владимир Савельев 2014-12-16 в 17:51 

      Дело 5 минут Оля! скрипты, дивы, css :razz:

      Ответить
  6. Нина 2014-12-17 в 03:17 

    Мне нравится кнопка Вверх-Вниз, очень удобно, всегда ею здесь пользуюсь, на многих блогах этой кнопки особенно не хватает.

    Ответить
    • Саня Сабегатулин 2015-06-30 в 10:51 

      Да, кнопка вверх не заменима 100%, а кнопка вниз хороша, если у вас статьи большие или же много комментариев к статьям.

      Ответить
  7. Никита Волков 2014-12-18 в 09:56 

    Было бы круто научиться делать кнопку «наверх» со стилями как в ВКонтакте)) Очень удобно)

    Ответить
    • Владимир Савельев 2014-12-18 в 17:10 

      Ну это возможно, чуток подправить исходники и все! Убрать один div, настроить css! :razz:

      Ответить
      • Никита Волков 2014-12-18 в 17:20 

        Как появятся деньги, то можно будет попросить тебя реализовать это?)

      • Владимир Савельев 2014-12-18 в 17:40 

        Да не вопрос Никит с легкостью :razz:

      • Никита Волков 2014-12-18 в 17:41 

        Оооо! Клёво) Спасибо большое тебе!

      • Игорь 2015-05-31 в 20:48 

        Кстати я видел кнопки по от дельности установлены,

        Вверх с права,а в низ слева и красиво и удобно

      • Саня Сабегатулин 2015-06-30 в 10:53 

        Игорь, я бы не сказал, что удобно. Бегаешь мышкой тудой-сюдой. Намного удобней, когда они в одном углу. Ну это как по мне.

  8. Дмитрий 2014-12-27 в 19:15 

    Не понимаю... Зачем вставлять кнопку вниз? Давайте разберем, что говорит нам об этом автор статьи.

    Итак по мнению автора — для того, чтобы попасть на комментарии, которых может быть очень и очень много.

    Вы меня извините, но только для этого использовать лишний юзабилити на сайте, давать лишнюю нагрузку на сервер и так далее. ЗАЧЕМ?

    Не проще ли сделать форму для добавления комментария до самих комментариев, как у того же самого Саши Борисова?

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

    Так проще и нагрузка не дается.

    Спасибо за внимание! :mrgreen: :mrgreen: :mrgreen:

    Ответить
    • Владимир Савельев 2014-12-27 в 22:33 

      Дмитрий немножко не так поняли для чего я сделал — эту функцию! Для того чтобы прочитать последние комментарии, а не написать комментарий, его и так можно в любом месте написать )))) От того одна кнопка вверх или две, сильно нагрузка на сервер не измениться — мизер одним словом! :razz:

      Ответить
  9. Ильдар Тимербаев 2015-01-04 в 10:25 

    А как называется плагин, который делает кнопку вверх на блоге?

    Я бы убрал этот плагин и поставил скрипт.

    Ответить
    • Владимир 2015-01-04 в 10:34 

      Возможно — Scroll to Top :razz:

      Ответить
      • Ильдар Тимербаев 2015-01-05 в 12:44 

        Нет, такого плагина у меня нет в блоге.

      • Владимир 2015-01-05 в 22:34 

        Если примерно подозреваешь какие то попробуй поочередно деактивировать один за другим и наблюдай когда кнопка ввех исчезнет! Так ты определишь этот плагин ))) а может у тебя кодом кнопка прописана? :razz:

      • Игорь 2015-05-31 в 20:50 

        Ильдар,забейте в поисковике названия плагинов для кнопки вверх и и увидете какой у вас установлен.

      • Саня Сабегатулин 2015-06-30 в 10:54 

        Хотел посмотреть на кнопку Ильдара, а его сайт хостером заблокирован, наверное не заплатил за хостинг.

  10. Александр Приколист 2015-01-16 в 04:45 

    У меня кнопка для поднятия вверх уже была заложена в шаблоне с возможностью отключения её.

    Она у меня серенькая и маленькая и многие не замечают.

    По поводу дополнительной кнопки внизу под сомнением, так как бывают разные посетители забегут проскролят с помощью кнопок вниз и вверх и убегут.

    А так пока спускаются вниз глядишь что нибудь и заинтересует, например прикольная рекламка :lol: :lol: :lol:

    Ответить
    • Саня Сабегатулин 2015-06-30 в 10:56 

      О, у меня тоже кнопочка не выделяется на сайте особо. Я даже переживал, видят ли ее посетители. Но через вэбвизор посмотрел, все норм, видят и пользуются :smile:

      Ответить
  11. Vlad 2015-02-13 в 18:58 

    Добрый день! Что делать если возникает ошибка скрипта при нажатии на стрелку вниз. На сайте имеется меню типа аккордеон. Без стрелок все нормально, подключаю стрелки (вверх/вниз) эффект меню не работает и кнопка вверх не работает. Вниз только работает. И выходит ошибка «Uncaught TypeError: Cannot read property 'toString' of null»

    Ответить
  12. Vlad 2015-02-13 в 19:07 

    методом проб и ошибок убедился что проблема в «jquery-1.3.2.js», после его отключения все работает, кроме кнопки вниз, она почему-то ведет себя также как и кнопка"вверх"

    Ответить
    • Владимир Савельев 2015-02-13 в 20:12 

      Влад привет! Возможно проблема в конфликте скриптов, попробуйте установить свежий jquery или прописать jQuery.noConflict();

      Ответить
    • Владимир Савельев 2015-02-13 в 20:20 

      Возможно у Вас уже установлена своя версия jquery, тогда установка этого пункта не требуется. Дело в том что дополнительно Вы подключаете еще одну — отсюда и конфликт :razz:

      Допустим у меня на блоге библиотека версии jQuery v1.11.1, попробуйте подключить одну свежую библиотеку...

      Ответить
  13. Vlad 2015-02-14 в 17:35 

    Добрый вечер! Спасибо за ответ, нашел свою ошибку, у меня был назначен в var id общего div-a, в который следил за резиновой версткой и отступами, когда указал id контента, все стало нормально работать! ;-)

    Ответить
    • Владимир 2015-02-14 в 19:43 

      Влад молорик :roll: Рад что разобрался!

      Ответить
  14. Александр 2015-03-25 в 08:38 

    Большое спасибо, самое нормальное объяснение во всем интернете, для меня во всяком случае...

    Ответить
    • Владимир 2015-04-02 в 08:18 

      Очень рад что мои статьи приносят пользу Саша :roll:

      Ответить
      • Виталий Охрименко 2015-09-30 в 18:12 

        Только единственное путь к изображениям в коде замени на более длинный, начиная с /wp-content/...

        не знаю почему, но если я начинаю с /image/... то у меня не работает

  15. Ольга 2015-08-14 в 18:48 

    Подробно все описано, что и за чем )

    Ответить
  16. Виталий Охрименко 2015-09-25 в 12:23 

    Вов, привет!

    Не знаю в чем прикол, но у меня в данном виде код не работал. А изменил в стилях путь файла, начиная с папки wp-content и все заработало.

    Ответить
    • Виталий Охрименко 2015-09-25 в 13:20 

      Блин, поспешил с выводами. Вроде все правильно,но почему-то не работает. Вов, а какая должна быть версия jquery?

      У меня в папке вордпресс уставновлена версия 1.11.3, причем как я понял она генерируется именно вордпрессом. Важна ли вообще версия?

      Ответить
      • Виталий Охрименко 2015-09-25 в 13:23 

        Сам стучусь, сам отвечаю — сам себя проверяю!

        Да, как оказалось версия играет роль. Добавил в body такую строчку:

        И все заработало. Правда стал гугл ругаться на добавление еще одного срипта...сейчас подумаю как удалить старую версию из папки wp-includes (где-то там она хранится, сейчас буду искать где)

      • Владимир Савельев 2015-09-25 в 23:42 

        У меня версия jQuery v2.1.4... Все работает, чтобы отключить jQuery в Вордпресс и подключить свой... иди в функции.php — далее пропиши такой код —

        /* Регистрация jQuery */
        function jquery_script_method() {
        wp_deregister_script('jquery');
        wp_register_script('jquery','/js/jquery.js',array(),'2.1.4'); 
        wp_enqueue_script('jquery');
        }    
        add_action('wp_enqueue_scripts','jquery_script_method');

        Не забудь прописать путь к своему файлу скрипта jQuery...

      • Виталий Охрименко 2015-09-30 в 18:08 

        Опана, а если я через скрипт в футере подключил более новый jQuery, 1.7 по моему, и все работает, никто не матюкается (я имею ввиду гугл и прочие сервисы проверок) Надо ли мне эту функцию вставлять?

      • Владимир Савельев 2015-09-30 в 18:17 

        Если подключить 2 библиотеки они будут конфликтовать между собой... 2.1.4 последняя версия. Смотреть короче надо :roll:

  17. Игорь 2015-09-26 в 23:28 

    А у меня с помощью плагина вверх вниз кнопки установлены.

    Но наверное заменю на код.

    Ответить
    • Виталий Охрименко 2015-09-30 в 18:11 

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

      Ответить
      • Игорь 2016-01-30 в 11:52 

        Виталь.в большенстве плагинов много не нужного кода.

        А также ссылки присутствуют.

  18. Наталья 2017-03-24 в 13:33 

    Доброго дня! Отличная статья.

    А где у Вас об этом можно почитать?

    (я так вообще соединил все скрипты в один файл, и разместил его перед тегом , но это другая история):

    Ответить
    • Владимир Савельев 2017-03-24 в 23:17 

      Привет Наталья! Я об этом не писал еще =) Смысл в следующем: создаете файл допустим scripts.js и туда копируете всевозможные скрипты. Далее прописываете команду ближе к </body>.

      Должно быть что то вроде этого:

      <script type='text/javascript' src='путь до файла/scripts.js'></script>

      Но тут нужны определенные знания, ибо одним неверным значением можно сайт положить =) Так что не заморачивайтесь!!!

      Ответить
  19. Наталья 2017-03-25 в 08:46 

    Да уж, Владимир)) мне не стоит этого делать, спасибо за откровенность.

    Ответить

Добавить комментарий

Прочитать Соглашение и Правила блога

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?:

Приветствую Вас друзья!
Савельев Владимир АлександровичМеня зовут Владимир Савельев, я являюсь автором блога savme.ru! Моя миссия - научить Вас создавать сайты, блоги и зарабатывать на них также, как это делаю я! Уже через год ведения блога я вышел на пассивный доход в 30.000 руб в месяц и это не предел! Еще я частенько пишу о своей жизни и устраиваю конкурсы с крутыми призами! Подпишитесь на мои новости, чтобы не пропустить что-то важное!
Безлимитная графика и шаблоны
Envato WW