Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

Сделай свою современную кнопку вверх и улучши навигацию сайта

Доброго времени суток всем, кто заинтересовался текущей темой публикации. Одну из самых значимых ролей на любом веб-ресурсе играет пользовательский интерфейс и навигация. Они должны быть максимально удобными и интуитивно понятными посетителям сайта, а также обязаны привлекательно выглядеть.

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

А всегда ли нужна такая кнопка?

На самом деле нет. Далеко не на всех сервисах необходимо вставлять навигационную кнопку, которая позволит подняться в начало страницы. Если содержание вкладки умещается в размер экрана (ну или почти умещается, процентов на 70-80), то такой механизм будет лишним. Я бы даже сказал нелепым.

Простая кнопка вверх

Однако если на веб-странице расположено много текста, изображений, видео и других объектов, то такая кнопка просто необходима. Она значительно ускорит работу пользователей.

На данный момент существует множество способов реализации кнопки вверх вплоть до готовых решений в bootstrap. Каждый из них можно использовать как для самостоятельно сверстанных ресурсов, так и для сайтов, созданных на платформах WordPress, uCoz, Bitrix, Joomla и других.

Пришло время разобрать конкретные примеры кода.

Кнопка вверх без скриптов

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

9bd3d3ef98dc836fd9e99ed6f724289a000

Такая реализация очень простая и быстро создается. Однако главным ее недостатком является то, что кнопку видно всегда, даже когда пользователь просматривает шапку страницы.


К тому же при нажатии на нее, идет быстрый скачек в 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='http://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(http://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>

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

С уважением, Роман Чуешов


Прочитано: 23 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: