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


Как сделать кнопку вверх на сайте с помощью JQuery

Кнопка вверх на сайте

Очень часто мы встречаем сайты на которых есть достаточно длинные статьи или же какие либо инструкции, и множество веб-мастеров делают сайты, не задумываясь о том насколько удобно и практично будет человеку просматривать подобные материалы. Хочу вам наглядно показать как сделать на сайте очень удобную кнопку, которая будет появляться если ваш документ слишком длинный, а именно кнопка «Вверх».

Для реализации поставленной задачи я буду использовать библиотеку языка JavaScript это Jquery. Скрипт по своей сути очень прост и не требует сложных настроек, главное понять, что куда вставлять и как это работает и именно это я вам и расскажу.

Для начала давайте посмотрим код:

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>Кнопка вверх на сайте</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <script type="text/javascript">
 
$(function() {
 $(window).scroll(function() {
 if($(this).scrollTop() != 0) {
 $('#upbottom').fadeIn();
 } else {
 $('#upbottom').fadeOut();
 }
 });
 $('#upbottom').click(function() {
 $('body,html').animate({scrollTop:0},700);
 });
 });
 </script>
</head>
<body>
<div id = "upbottom" > Вверх </div>
<p>Текст…</p>
</body>
</html>

Давайте разберем все по порядку, для начала мы подключаем таблицу стилей <link rel="stylesheet" type="text/css" href="style.css">, здесь мы собственно говоря настраиваем вид нашей кнопки я использовал обычную картинку со стрелочкой и фоном background:url(up.png) no-repeat #f7f7f7; обязательно добавил параметр no-repeat чтобы рисунок не повторялся, задал ширину в 120 пикселей, цвет и т.д., еще одним из важных моментов здесь будет отступы от низа и правого края bottom:10px; right:10px; тут сами понимаете регулируйте так как вам будет удобно. Вообще дизайн кнопки вы легко можете изменить здесь ни чего сложного, вы легко подгоните её под свой дизайн.

Далее мы подключаем JQuery:

<src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Если у вас в документе она уже подключалась то повторно этого делать не надо. Затем у нас идет сам скрипт, в котором вам не чего не нужно менять, вам лишь остается добавить на страницу между тегами <body> следующую строчку:

<div id = "upbottom" > Вверх </div>

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

Так же для удобства чтобы не переполнять тег head, лишним кодом можно вынести его в отдельный файл прописав вместо него строчку типа:

<script src="script.js" type="text/javascript"></script>

Где script.js это тот файл в который вы перенесли код. Вот собственно говоря и вся хитрость создания кнопки вверх на Jquery. Я думаю сложного здесь ни чего нет, и вы легко сможете сделать сайт немножко удобнее для посетителей благодаря этому несложному скрипту.

Дата: 2014-12-19
Автор: Алексей Мезенцев
HTML5 и CSS3 с Нуля до Гуру

HTML5 и CSS3

Научись создавать профессиональные современные сайты на HTML5 и CSS3

Узнать подробности