Доброго времени суток всем, кто заинтересовался текущей темой публикации. Одну из самых значимых ролей на любом веб-ресурсе играет пользовательский интерфейс и навигация. Они должны быть максимально удобными и интуитивно понятными посетителям сайта, а также обязаны привлекательно выглядеть.
Поэтому в сегодняшней статье я расскажу, как создается кнопка вверх, какие бывают варианты реализации данной технологии и прокрутки страниц и конечно же приведу несколько примеров. Ну а теперь давайте перейдем к самому интересному!
А всегда ли нужна такая кнопка?
На самом деле нет. Далеко не на всех сервисах необходимо вставлять навигационную кнопку, которая позволит подняться в начало страницы. Если содержание вкладки умещается в размер экрана (ну или почти умещается, процентов на 70-80), то такой механизм будет лишним. Я бы даже сказал нелепым.
Однако если на веб-странице расположено много текста, изображений, видео и других объектов, то такая кнопка просто необходима. Она значительно ускорит работу пользователей.
На данный момент существует множество способов реализации кнопки вверх вплоть до готовых решений в bootstrap. Каждый из них можно использовать как для самостоятельно сверстанных ресурсов, так и для сайтов, созданных на платформах WordPress, uCoz, Bitrix, Joomla и других.
Пришло время разобрать конкретные примеры кода.
Кнопка вверх без скриптов
Для начала я решил написать программную реализацию описываемой технологии без использования скриптов. Для этого я сделал html-разметку, в которой за прокрутку вверх отвечает ссылка. Ее размещаем внизу с правой стороны веб-странички.
3ec80a1da439210d3f267efb6aabb6d2000
Такая реализация очень простая и быстро создается. Однако главным ее недостатком является то, что кнопку видно всегда, даже когда пользователь просматривает шапку страницы.
К тому же при нажатии на нее, идет быстрый скачек в 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> |
На этом я остановлюсь. Очень надеюсь, что данная статья помогла вам разобраться в материале и пригодилась на практике. Не забывайте подписываться на мой блог и рассказывать о нем друзьям. Пока-пока!
С уважением, Роман Чуешов
