Главная » Вебмастеру » Как сделать кнопку «Наверх» для HTML-сайта

Как сделать кнопку «Наверх» для HTML-сайта

2015-02-13 / Вр:00:46 / просмотров: 9086

Ах, как быстро привыкает человек к удобству, независимо, где он находится: дома или на сайте! Не знаю как вы, но я привык пользоваться кнопкой «Наверх», а особенно это удобно, когда статья больших размеров.
Итак, в этой статье я расскажу, как сделать кнопку «Наверх» для сайта, используя библиотеку 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>

Теперь при прокрутке страницы вниз будет появляться небольшой синий полупрозрачный блок с надписью «Наверх».

Как сделать кнопку «Наверх» для HTML-сайта