Ах, как быстро привыкает человек к удобству, независимо, где он находится: дома или на сайте! Не знаю как вы, но я привык пользоваться кнопкой «Наверх», а особенно это удобно, когда статья больших размеров.
Итак, в этой статье я расскажу, как сделать кнопку «Наверх» для сайта, используя библиотеку jQuery.
1. Подключим библиотеку jQuery. Кстати, об этом я писал недавно здесь.
Добавьте между тегами <head>…</head> вот этот код:
<script ENGINE="text/javascript" src="js/jquery-1.11.2.min.js"></script>
2. Добавляем между тегами <body></body> саму кнопку-ссылку «Наверх»:
<a id="move_up" href="#" style="display:none; ">наверх</a> <a id="move_up" href="#" style="display:none; ">наверх</a>
и сразу после кнопки «Наверх» добавьте код JavaScript:
<script type="text/javascript">
$(function()
{
$(window).scroll(function()
{
if($(this).scrollTop()>100) $('a#move_up').fadeIn();
else $('a#move_up').fadeOut(400);
});
$('a#move_up').click(function(){
$('body,html').animate({scrollTop: 0}, 450);
return false;
});
});
</script>
Обратите внимание на строку №6, там есть цифра 100 – она указывает, через какое количество слов должна появляться кнопка «Наверх». Вы можете указать любую другую подходящую для вас цифру.
В строке №11 есть цифра 450 – указывает скорость подъема страницы. Вы можете тоже указать свою цифру. Чем выше цифра, тем медленнее страница поднимается наверх, чем меньше цифра, тем быстрее страница окажется наверху.
3. Теперь добавьте код CSS. Кто не знает, как подключить CSS к HTML файлу, почитайте об этом тут.
a#move_up
{
position:fixed; /* фиксированное положение блока*/
top:8px;
right:20px;
width:56px;
height:20px;
display:none;
text-align:center;
font:12px Arial,Verdana,sans-serif;
color:#fff;
background:#3366ff;
padding-top:5px;
/*прозрачность*/
opacity:0.7;
filter:alpha(opacity=70);
border-radius: 2px;
text-decoration:none;
}
a#move_up:hover
{
opacity:0.9;
filter: alpha(opacity=90);
}
Вот это и все. Вот так выглядит полностью готовый код:
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Кнопка Наверх - BlogGood.ru</title>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<style type="text/css">
a#move_up{
position:fixed; /* фиксированное положение блока*/
top:8px;
right:20px;
width:56px;
height:20px;
display:none;
text-align:center;
font:12px Arial,Verdana,sans-serif;
color:#fff;
background:#3366ff;
padding-top:5px;
/*прозрачность*/
opacity:0.7;
filter:alpha(opacity=70);
border-radius: 2px;
text-decoration:none;}
a#move_up:hover{
opacity:0.9;
filter: alpha(opacity=90);}
</style>
</head>
<body>
Ваш текст (желательно больше текста)
<a id="move_up" href="#" style="display:none; ">наверх</a>
<script type="text/javascript">
$(function()
{
$(window).scroll(function()
{
if($(this).scrollTop()>100) $('a#move_up').fadeIn();
else $('a#move_up').fadeOut(400);
});
$('a#move_up').click(function(){
$('body,html').animate({scrollTop: 0}, 50);
return false;
});
});
</script>
</body>
</html>
Теперь при прокрутке страницы вниз будет появляться небольшой синий полупрозрачный блок с надписью «Наверх».
[Посмотреть демонстрацию] < = > [Скачать исходник]
Спасибо, что посетили мой блог BlogGood.ru. Подписывайтесь на обновление и получите свежие статьи прямо на почту.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Сайт пока не может обработать этот запрос HTTP ERROR 500
Всплывающее окно (Модальное окно) на CSS при клике по ссылке или через указанное время
Как получить значение ID при клике по слову?
Как получить значение value с кнопки button?Похожие статьи
Как узнать, на каком движке сделан сайт?
Спецсимволы для HTML и CSS
Как сделать плавное появление блока (спойлер)
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 Март 2013
Прокомментировано:90
просмотров: 303174 -
Размеры форматов листов А0 – А7
Дата: 23 Январь 2013
Прокомментировано:2
просмотров: 251120 -
Установка windows 7 на ноутбук
Дата: 18 Декабрь 2012
Прокомментировано:167
просмотров: 178361 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 Ноябрь 2014
Прокомментировано:5
просмотров: 176495 -
Как включить или отключить Aero в Windows 7
Дата: 1 Июнь 2013
Прокомментировано:4
просмотров: 144685
6 Ответов на комментарий - Как сделать кнопку «Наверх» для HTML-сайта
Добавить комментарий
Метки: Вебмастеру, для сайта
Опять коды
Вот не люблю я их. В новой теме, кнопку вверх, поставил плагином. Так как код кнопок вверх, вниз, прокрутка и пауза не сработал. Но получилось довольно не плохо. 
В кодах ничего сложного нет, нужно просто попробовать. А лучше, просмотреть основы HTML и тогда, возможно, Вы, Андрей, полюбите кода
Ой, наверное я с ними не подружусь никогда. Интересно конечно, но и боязно как то.
А урок первый, я изучал уже давно, вроде все понятно, но иногда такое вылазит что жуть.
Что именно вылазит? Кракозя́бры?
Ну на счет кракозяблов, это кодирова. Это легко. Просто иногда вот не получается, хоть убей
Только вчера поставила себе “вверх” на сайт. При помощи плагина Smooth Scroll Up. Очень удобный плагин, легко настраивается, имеет ряд способов вывода кнопки.