Доброго времени суток всем, кто заинтересовался текущей темой публикации. Одну из самых значимых ролей на любом веб-ресурсе играет пользовательский интерфейс и навигация. Они должны быть максимально удобными и интуитивно понятными посетителям сайта, а также обязаны привлекательно выглядеть.
Поэтому в сегодняшней статье я расскажу, как создается кнопка вверх, какие бывают варианты реализации данной технологии и прокрутки страниц и конечно же приведу несколько примеров. Ну а теперь давайте перейдем к самому интересному!
А всегда ли нужна такая кнопка?
На самом деле нет. Далеко не на всех сервисах необходимо вставлять навигационную кнопку, которая позволит подняться в начало страницы. Если содержание вкладки умещается в размер экрана (ну или почти умещается, процентов на 70-80), то такой механизм будет лишним. Я бы даже сказал нелепым.
Однако если на веб-странице расположено много текста, изображений, видео и других объектов, то такая кнопка просто необходима. Она значительно ускорит работу пользователей.
На данный момент существует множество способов реализации кнопки вверх вплоть до готовых решений в bootstrap. Каждый из них можно использовать как для самостоятельно сверстанных ресурсов, так и для сайтов, созданных на платформах WordPress, uCoz, Bitrix, Joomla и других.
Пришло время разобрать конкретные примеры кода.
Кнопка вверх без скриптов
Для начала я решил написать программную реализацию описываемой технологии без использования скриптов. Для этого я сделал html-разметку, в которой за прокрутку вверх отвечает ссылка. Ее размещаем внизу с правой стороны веб-странички.
f990d6bc0d9bbad87990b85531cd411c000
Такая реализация очень простая и быстро создается. Однако главным ее недостатком является то, что кнопку видно всегда, даже когда пользователь просматривает шапку страницы.
К тому же при нажатии на нее, идет быстрый скачек в header. Конечно основная функция выполняется, но для глаз человека такие скачки не очень приятны, да и иногда вызывают непонимание прокрутилась страница или нет.
Возникающая кнопка при помощи jQuery
Поэтому следующий пример написан по всем правилам web-красоты, так сказать.
Во-первых, небольшой набор основных стилевых правил на css будет отображаться в любом браузере любых версий.
Во-вторых, за все действия кнопки отвечает jQuery.
Чем же это лучше? Прежде всего тем, что скриптовые функции обязательно выполнятся в любом браузере. Разработчикам не нужно опасаться, что в какой-то из версий их проекта что-то пойдет не так. К тому же код, написанный на js, очень прост и короток, что также позволяет его быстро разобрать и проанализировать на баги. И самое главное преимущество состоит в плавном прокручивании страниц к их шапкам.
Ниже я презентовал пример с комментариями, объясняющими ключевые моменты.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Кнопка на html и css</title> <style> body { background: #F5FFFA; } img { width: 95px; height: 95px; } #bTop { position: fixed; bottom:0; z-index: 99; right:0; opacity: .83; margin-left: 17px; background: #AFEfEf; cursor: pointer; width: 95px; height: 95px; border-radius: 51%; } #bTop:hover { opacity: 1; } #content{ width:20%; font-size:65px; margin-left:46%; } </style> </head> <body> /*Данная строка является якорем, благодаря которому код работает корректно*/ <div><a id='up'/></div> <div><a id="bTop" href="#up"><img src='https://xn--d1aiaffnedrlat.xn--p1ai.images.1c-bitrix-cdn.ru/bitrix/templates/vladimir-base/images/button_up.png?14116644005759'/></a></div> <div id="content"><p>А вот теперь пишу очень-очень много текстового контента, чтоб появилось хоть какое-то скроллирование.</p></div> </body> </html> |
Небольшой бонус
Я заметил, что в сети очень часто просят показать код кнопки как ВКонтакте. На самом деле, дорогие мои читатели, вы и сами теперь можете ее легко сделать. В качестве бонуса я показал, как можно видоизменить прошлый код и сделать навигацию, похожую на ту, которая используется в популярной соцсети.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>article</title> /*как обычно, в head прописываю вначале скрипты, а после стили. Подключаю библиотеку jQuery.*/ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script> $(document).ready(function(){ //отмечаю, что изначально кнопка со стрелкой вверх скрыта $("#up").hide(); $(function () { //Если посетитель сайта начинает скроллировать вкладку, то вызывается ниже написанная функция $(window).scroll(function () { //если контент сдвинулся на 100 единиц, то стрелка становится видимой if ($(this).scrollTop() > 100) { $('#up').fadeIn(); } else { //иначе – скрывается $('#up').fadeOut(); } }); //Функция вызывается при нажатии на кнопку $('#up a').click(function () { $('body,html').animate({ scrollTop: 0 }, 750); //Чем больше это значение, тем медленнее двигается веб-страница return false; }); }); }); </script> <style> #up { position: fixed; bottom: 27px; margin-left: -333px; } #up a { width: 113px; display: block; } body { background: #F0FFFF; } #up span { width: 113px; height: 113px; opacity:.32; display: block; background: #bdb url(https://s1.iconbird.com/ico/2014/1/598/w512h5121390846468upcircular512.png) no-repeat; background-size: cover; -moz-border-radius: 51%; border-radius: 51%; -webkit-border-radius: 51%; -webkit-transition: 1s; transition: 1s; -moz-transition: 1s; } #up a:hover span { opacity:1; background-color: #87CEFA; } /*Не пугайтесь, я специально сделал такой размер символов, чтобы появилась панель прокрутки*/ #text, h1{ font-size: 75px; } article { width: 42%; margin-left:32%; } </style> </head> <body> <article> <h1>Программный код навигации с jQuery</h1> <p id="text">Напишу-ка я историю о чем-то интересном. Главное придумать о чем.</p> <p id="up"> <a href="#up"><span></span></a> </p> </article> </body> </html> |
На этом я остановлюсь. Очень надеюсь, что данная статья помогла вам разобраться в материале и пригодилась на практике. Не забывайте подписываться на мой блог и рассказывать о нем друзьям. Пока-пока!
С уважением, Роман Чуешов