Очень часто мы встречаем сайты на которых есть достаточно длинные статьи или же какие либо инструкции, и множество веб-мастеров делают сайты, не задумываясь о том насколько удобно и практично будет человеку просматривать подобные материалы. Хочу вам наглядно показать как сделать на сайте очень удобную кнопку, которая будет появляться если ваш документ слишком длинный, а именно кнопка «Вверх».
Для реализации поставленной задачи я буду использовать библиотеку языка 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
Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!
Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.
