![Как сделать кнопки вверх и вниз: простым кодом!](https://savme.ru/wp-content/uploads/2014/12/sozdanie-knopki-vverh-vniz.jpg)
Как сделать кнопки вверх и вниз: простым кодом!
Приветствую Вас друзья! Сегодняшняя тема статьи посвящена улучшению навигации, я на примере покажу: как сделать кнопки вверх и вниз на сайте/блоге... Делается это очень просто, внимательно читаем, копируем код в конце статьи и размещаем на Ваших ресурсах!
Читайте:
- 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.: Кстати следующая статья посвящена плагинам — подпишитесь на обновления блога! И скоро будет новый конкурс на блоге...
![Савельев Владимир Александрович](/wp-content/themes/savmeru/images/my-face.jpg)
С уважением, Владимир Савельев
![Премиум курсы от webformyself](/wp-content/uploads/2015/06/premium_kursi_webfor.jpg)
Ничего себе. И вправду не сложно совсем! Знать бы ещё как стили менять))
Никитос, так абсолютно ничего сложного. На кнопке правой кнопкой мыши -> просмотреть код эллемента, а там справой стороны все стили будут. Редактируешь их на свое усмотрение, как сам хочешь, и сразу же наглядно смотришь результаты. Такое редактирование отражается в режиме онлайн, но никак не влияет на сайт. Находишь нужные себе стили методом проб и ошибок, а потом вносишь изменения в стили на сайте
Виталь,ты так расписал легко.
Не многие это поймут.![;-)](https://savme.ru/wp-content/plugins/classic-smilies/img/icon_wink.gif)
Но кнопка эта опускает в самый низ или поднимает наверх до конца. Для этой цели можно нажать на колесико мышки и также двигать. Да и с колесиком можно еще и скорость регулировать и остановиться на интересном месте, если статья уж слишком объемная. Не понимаю надобность кнопки этой.
И это называется ЮзабИлити, так для информации))
Просто нужно дополнительно паузу поставить и скорость прокрутки убавить.
Колесико для Володиных конкурсов не вариант. Когда к статье огромное количесто комментов замучаешься колесико листать.
Стрелочки вверх и вниз существенно экономят время.
Да Максим ты абсолютно прав на счет мыши. Но есть одно НО! Основная масса пользователей интернета не используют такую функцию с помощью колесика мышки.
А за ошибку в Юзабилити спасибо, торопился пропустил![:roll:](https://savme.ru/wp-content/plugins/classic-smilies/img/icon_rolleyes.gif)
Мне нравится, когда есть кнопки вверх/вниз. Особенно удобны при комментировании: не надо долго крутить колесико доя того, чтобы добраться вниз страницы и написать комментарий или быстро вернуться к статье.
Я с тобой согласен Татьяна очень удобно! Просто тыкнуть и все![:razz:](https://savme.ru/wp-content/plugins/classic-smilies/img/icon_razz.gif)
Так же как и вверх,быстренько добежать,но тормозок все равно не помешал бы.
Игорь, это уже с помощью колесика![:grin:](https://savme.ru/wp-content/plugins/classic-smilies/img/icon_biggrin.gif)
Да не Саня,колесико это уже не то.
Но все же приходится и им скролить
Нужно подробно прочитать. У меня на 2 сайтах нет такой кнопки, а она очень нужна.
Дело 5 минут Оля! скрипты, дивы, css![:razz:](https://savme.ru/wp-content/plugins/classic-smilies/img/icon_razz.gif)
Мне нравится кнопка Вверх-Вниз, очень удобно, всегда ею здесь пользуюсь, на многих блогах этой кнопки особенно не хватает.
Да, кнопка вверх не заменима 100%, а кнопка вниз хороша, если у вас статьи большие или же много комментариев к статьям.
Было бы круто научиться делать кнопку «наверх» со стилями как в ВКонтакте)) Очень удобно)
Ну это возможно, чуток подправить исходники и все! Убрать один div, настроить css!![:razz:](https://savme.ru/wp-content/plugins/classic-smilies/img/icon_razz.gif)
Как появятся деньги, то можно будет попросить тебя реализовать это?)
Да не вопрос Никит с легкостью![:razz:](https://savme.ru/wp-content/plugins/classic-smilies/img/icon_razz.gif)
Оооо! Клёво) Спасибо большое тебе!
Кстати я видел кнопки по от дельности установлены,
Вверх с права,а в низ слева и красиво и удобно
Игорь, я бы не сказал, что удобно. Бегаешь мышкой тудой-сюдой. Намного удобней, когда они в одном углу. Ну это как по мне.
Не понимаю... Зачем вставлять кнопку вниз? Давайте разберем, что говорит нам об этом автор статьи.
Итак по мнению автора — для того, чтобы попасть на комментарии, которых может быть очень и очень много.
Вы меня извините, но только для этого использовать лишний юзабилити на сайте, давать лишнюю нагрузку на сервер и так далее. ЗАЧЕМ?
Не проще ли сделать форму для добавления комментария до самих комментариев, как у того же самого Саши Борисова?
Тогда пользователь прочитал статью и сразу имеет возможность написать в блог комментарий.
Так проще и нагрузка не дается.
Спасибо за внимание!
![:mrgreen:](https://savme.ru/wp-content/plugins/classic-smilies/img/icon_mrgreen.gif)
Дмитрий немножко не так поняли для чего я сделал — эту функцию! Для того чтобы прочитать последние комментарии, а не написать комментарий, его и так можно в любом месте написать )))) От того одна кнопка вверх или две, сильно нагрузка на сервер не измениться — мизер одним словом!![:razz:](https://savme.ru/wp-content/plugins/classic-smilies/img/icon_razz.gif)
А как называется плагин, который делает кнопку вверх на блоге?
Я бы убрал этот плагин и поставил скрипт.
Возможно — Scroll to Top![:razz:](https://savme.ru/wp-content/plugins/classic-smilies/img/icon_razz.gif)
Нет, такого плагина у меня нет в блоге.
Если примерно подозреваешь какие то попробуй поочередно деактивировать один за другим и наблюдай когда кнопка ввех исчезнет! Так ты определишь этот плагин ))) а может у тебя кодом кнопка прописана?![:razz:](https://savme.ru/wp-content/plugins/classic-smilies/img/icon_razz.gif)
Ильдар,забейте в поисковике названия плагинов для кнопки вверх и и увидете какой у вас установлен.
Хотел посмотреть на кнопку Ильдара, а его сайт хостером заблокирован, наверное не заплатил за хостинг.
У меня кнопка для поднятия вверх уже была заложена в шаблоне с возможностью отключения её.
Она у меня серенькая и маленькая и многие не замечают.
По поводу дополнительной кнопки внизу под сомнением, так как бывают разные посетители забегут проскролят с помощью кнопок вниз и вверх и убегут.
А так пока спускаются вниз глядишь что нибудь и заинтересует, например прикольная рекламка
![:lol:](https://savme.ru/wp-content/plugins/classic-smilies/img/icon_lol.gif)
О, у меня тоже кнопочка не выделяется на сайте особо. Я даже переживал, видят ли ее посетители. Но через вэбвизор посмотрел, все норм, видят и пользуются![:smile:](https://savme.ru/wp-content/plugins/classic-smilies/img/icon_smile.gif)
Добрый день! Что делать если возникает ошибка скрипта при нажатии на стрелку вниз. На сайте имеется меню типа аккордеон. Без стрелок все нормально, подключаю стрелки (вверх/вниз) эффект меню не работает и кнопка вверх не работает. Вниз только работает. И выходит ошибка «Uncaught TypeError: Cannot read property 'toString' of null»
методом проб и ошибок убедился что проблема в «jquery-1.3.2.js», после его отключения все работает, кроме кнопки вниз, она почему-то ведет себя также как и кнопка"вверх"
Влад привет! Возможно проблема в конфликте скриптов, попробуйте установить свежий jquery или прописать
jQuery.noConflict();
Возможно у Вас уже установлена своя версия jquery, тогда установка этого пункта не требуется. Дело в том что дополнительно Вы подключаете еще одну — отсюда и конфликт
Допустим у меня на блоге библиотека версии jQuery v1.11.1, попробуйте подключить одну свежую библиотеку...
Добрый вечер! Спасибо за ответ, нашел свою ошибку, у меня был назначен в var id общего div-a, в который следил за резиновой версткой и отступами, когда указал id контента, все стало нормально работать!![;-)](https://savme.ru/wp-content/plugins/classic-smilies/img/icon_wink.gif)
Влад молорик
Рад что разобрался!
Большое спасибо, самое нормальное объяснение во всем интернете, для меня во всяком случае...
Очень рад что мои статьи приносят пользу Саша![:roll:](https://savme.ru/wp-content/plugins/classic-smilies/img/icon_rolleyes.gif)
Только единственное путь к изображениям в коде замени на более длинный, начиная с /wp-content/...
не знаю почему, но если я начинаю с /image/... то у меня не работает
Подробно все описано, что и за чем )
Вов, привет!
Не знаю в чем прикол, но у меня в данном виде код не работал. А изменил в стилях путь файла, начиная с папки wp-content и все заработало.
Блин, поспешил с выводами. Вроде все правильно,но почему-то не работает. Вов, а какая должна быть версия jquery?
У меня в папке вордпресс уставновлена версия 1.11.3, причем как я понял она генерируется именно вордпрессом. Важна ли вообще версия?
Сам стучусь, сам отвечаю — сам себя проверяю!
Да, как оказалось версия играет роль. Добавил в body такую строчку:
И все заработало. Правда стал гугл ругаться на добавление еще одного срипта...сейчас подумаю как удалить старую версию из папки wp-includes (где-то там она хранится, сейчас буду искать где)
У меня версия jQuery v2.1.4... Все работает, чтобы отключить jQuery в Вордпресс и подключить свой... иди в функции.php — далее пропиши такой код —
Не забудь прописать путь к своему файлу скрипта jQuery...
Опана, а если я через скрипт в футере подключил более новый jQuery, 1.7 по моему, и все работает, никто не матюкается (я имею ввиду гугл и прочие сервисы проверок) Надо ли мне эту функцию вставлять?
Если подключить 2 библиотеки они будут конфликтовать между собой... 2.1.4 последняя версия. Смотреть короче надо![:roll:](https://savme.ru/wp-content/plugins/classic-smilies/img/icon_rolleyes.gif)
А у меня с помощью плагина вверх вниз кнопки установлены.
Но наверное заменю на код.
Конечно код это лучше. Хотя и плагин скрипт подключает, и код скрипт подключает. По хорошему правльно созданный плагин почти не грузит систему. Хотя я тоже такого мнения чтобы плагины кодами заменять
Виталь.в большенстве плагинов много не нужного кода.
А также ссылки присутствуют.
Доброго дня! Отличная статья.
А где у Вас об этом можно почитать?
(я так вообще соединил все скрипты в один файл, и разместил его перед тегом , но это другая история):
Привет Наталья! Я об этом не писал еще =) Смысл в следующем: создаете файл допустим scripts.js и туда копируете всевозможные скрипты. Далее прописываете команду ближе к
</body>
.Должно быть что то вроде этого:
<script type='text/javascript' src='путь до файла/scripts.js'></script>
Но тут нужны определенные знания, ибо одним неверным значением можно сайт положить =) Так что не заморачивайтесь!!!
Да уж, Владимир)) мне не стоит этого делать, спасибо за откровенность.