Рубрика: Все для вебмастера
Как сделать кнопки вверх и вниз: простым кодом!
56 комментариев 2014-12-14
Приветствую Вас друзья! Сегодняшняя тема статьи посвящена улучшению навигации, я на примере покажу: как сделать кнопки вверх и вниз на сайте/блоге... Делается это очень просто, внимательно читаем, копируем код в конце статьи и размещаем на Ваших ресурсах!
Читайте:
- 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.: Кстати следующая статья посвящена плагинам — подпишитесь на обновления блога! И скоро будет новый конкурс на блоге...
С уважением, Владимир Савельев
Премиум-уроки от клуба webformyself
Это новый революционный продукт в области обучения сайтостроительству! Все лучшие видео-уроки собраны в одном месте и разделены на категории: WordPress, Joomla, PHP, HTML, CSS и JavaScript... База постоянно пополняется и уже сейчас в ней более 200 уроков! Всего за один год - Вы сможете стать опытным веб-мастером "с полного нуля"!Подробнее
Обсуждение статьи: 56 комментариев
Ничего себе. И вправду не сложно совсем! Знать бы ещё как стили менять))
Никитос, так абсолютно ничего сложного. На кнопке правой кнопкой мыши -> просмотреть код эллемента, а там справой стороны все стили будут. Редактируешь их на свое усмотрение, как сам хочешь, и сразу же наглядно смотришь результаты. Такое редактирование отражается в режиме онлайн, но никак не влияет на сайт. Находишь нужные себе стили методом проб и ошибок, а потом вносишь изменения в стили на сайте
Виталь,ты так расписал легко.
Не многие это поймут.
Но кнопка эта опускает в самый низ или поднимает наверх до конца. Для этой цели можно нажать на колесико мышки и также двигать. Да и с колесиком можно еще и скорость регулировать и остановиться на интересном месте, если статья уж слишком объемная. Не понимаю надобность кнопки этой.
И это называется ЮзабИлити, так для информации))
Просто нужно дополнительно паузу поставить и скорость прокрутки убавить.
Колесико для Володиных конкурсов не вариант. Когда к статье огромное количесто комментов замучаешься колесико листать.
Стрелочки вверх и вниз существенно экономят время.
Да Максим ты абсолютно прав на счет мыши. Но есть одно НО! Основная масса пользователей интернета не используют такую функцию с помощью колесика мышки.
А за ошибку в Юзабилити спасибо, торопился пропустил
Мне нравится, когда есть кнопки вверх/вниз. Особенно удобны при комментировании: не надо долго крутить колесико доя того, чтобы добраться вниз страницы и написать комментарий или быстро вернуться к статье.
Я с тобой согласен Татьяна очень удобно! Просто тыкнуть и все
Так же как и вверх,быстренько добежать,но тормозок все равно не помешал бы.
Игорь, это уже с помощью колесика
Да не Саня,колесико это уже не то.
Но все же приходится и им скролить
Нужно подробно прочитать. У меня на 2 сайтах нет такой кнопки, а она очень нужна.
Дело 5 минут Оля! скрипты, дивы, css
Мне нравится кнопка Вверх-Вниз, очень удобно, всегда ею здесь пользуюсь, на многих блогах этой кнопки особенно не хватает.
Да, кнопка вверх не заменима 100%, а кнопка вниз хороша, если у вас статьи большие или же много комментариев к статьям.
Было бы круто научиться делать кнопку «наверх» со стилями как в ВКонтакте)) Очень удобно)
Ну это возможно, чуток подправить исходники и все! Убрать один div, настроить css!
Как появятся деньги, то можно будет попросить тебя реализовать это?)
Да не вопрос Никит с легкостью
Оооо! Клёво) Спасибо большое тебе!
Кстати я видел кнопки по от дельности установлены,
Вверх с права,а в низ слева и красиво и удобно
Игорь, я бы не сказал, что удобно. Бегаешь мышкой тудой-сюдой. Намного удобней, когда они в одном углу. Ну это как по мне.
Не понимаю... Зачем вставлять кнопку вниз? Давайте разберем, что говорит нам об этом автор статьи.
Итак по мнению автора — для того, чтобы попасть на комментарии, которых может быть очень и очень много.
Вы меня извините, но только для этого использовать лишний юзабилити на сайте, давать лишнюю нагрузку на сервер и так далее. ЗАЧЕМ?
Не проще ли сделать форму для добавления комментария до самих комментариев, как у того же самого Саши Борисова?
Тогда пользователь прочитал статью и сразу имеет возможность написать в блог комментарий.
Так проще и нагрузка не дается.
Спасибо за внимание!
Дмитрий немножко не так поняли для чего я сделал — эту функцию! Для того чтобы прочитать последние комментарии, а не написать комментарий, его и так можно в любом месте написать )))) От того одна кнопка вверх или две, сильно нагрузка на сервер не измениться — мизер одним словом!
А как называется плагин, который делает кнопку вверх на блоге?
Я бы убрал этот плагин и поставил скрипт.
Возможно — Scroll to Top
Нет, такого плагина у меня нет в блоге.
Если примерно подозреваешь какие то попробуй поочередно деактивировать один за другим и наблюдай когда кнопка ввех исчезнет! Так ты определишь этот плагин ))) а может у тебя кодом кнопка прописана?
Ильдар,забейте в поисковике названия плагинов для кнопки вверх и и увидете какой у вас установлен.
Хотел посмотреть на кнопку Ильдара, а его сайт хостером заблокирован, наверное не заплатил за хостинг.
У меня кнопка для поднятия вверх уже была заложена в шаблоне с возможностью отключения её.
Она у меня серенькая и маленькая и многие не замечают.
По поводу дополнительной кнопки внизу под сомнением, так как бывают разные посетители забегут проскролят с помощью кнопок вниз и вверх и убегут.
А так пока спускаются вниз глядишь что нибудь и заинтересует, например прикольная рекламка
О, у меня тоже кнопочка не выделяется на сайте особо. Я даже переживал, видят ли ее посетители. Но через вэбвизор посмотрел, все норм, видят и пользуются
Добрый день! Что делать если возникает ошибка скрипта при нажатии на стрелку вниз. На сайте имеется меню типа аккордеон. Без стрелок все нормально, подключаю стрелки (вверх/вниз) эффект меню не работает и кнопка вверх не работает. Вниз только работает. И выходит ошибка «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 контента, все стало нормально работать!
Влад молорик
Рад что разобрался!
Большое спасибо, самое нормальное объяснение во всем интернете, для меня во всяком случае...
Очень рад что мои статьи приносят пользу Саша
Только единственное путь к изображениям в коде замени на более длинный, начиная с /wp-content/...
не знаю почему, но если я начинаю с /image/... то у меня не работает
Подробно все описано, что и за чем )
Вов, привет!
Не знаю в чем прикол, но у меня в данном виде код не работал. А изменил в стилях путь файла, начиная с папки wp-content и все заработало.
Блин, поспешил с выводами. Вроде все правильно,но почему-то не работает. Вов, а какая должна быть версия jquery?
У меня в папке вордпресс уставновлена версия 1.11.3, причем как я понял она генерируется именно вордпрессом. Важна ли вообще версия?
Сам стучусь, сам отвечаю — сам себя проверяю!
Да, как оказалось версия играет роль. Добавил в body такую строчку:
И все заработало. Правда стал гугл ругаться на добавление еще одного срипта...сейчас подумаю как удалить старую версию из папки wp-includes (где-то там она хранится, сейчас буду искать где)
У меня версия 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...
Опана, а если я через скрипт в футере подключил более новый jQuery, 1.7 по моему, и все работает, никто не матюкается (я имею ввиду гугл и прочие сервисы проверок) Надо ли мне эту функцию вставлять?
Если подключить 2 библиотеки они будут конфликтовать между собой... 2.1.4 последняя версия. Смотреть короче надо
А у меня с помощью плагина вверх вниз кнопки установлены.
Но наверное заменю на код.
Конечно код это лучше. Хотя и плагин скрипт подключает, и код скрипт подключает. По хорошему правльно созданный плагин почти не грузит систему. Хотя я тоже такого мнения чтобы плагины кодами заменять
Виталь.в большенстве плагинов много не нужного кода.
А также ссылки присутствуют.
Доброго дня! Отличная статья.
А где у Вас об этом можно почитать?
(я так вообще соединил все скрипты в один файл, и разместил его перед тегом , но это другая история):
Привет Наталья! Я об этом не писал еще =) Смысл в следующем: создаете файл допустим scripts.js и туда копируете всевозможные скрипты. Далее прописываете команду ближе к
</body>.Должно быть что то вроде этого:
<script type='text/javascript' src='путь до файла/scripts.js'></script>Но тут нужны определенные знания, ибо одним неверным значением можно сайт положить =) Так что не заморачивайтесь!!!
Да уж, Владимир)) мне не стоит этого делать, спасибо за откровенность.