BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

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

[Посмотреть демонстрацию] < = > [Скачать исходник]

Спасибо, что посетили мой блог BlogGood.ru. Подписывайтесь на обновление и получите свежие статьи прямо на почту.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

  1. Андрей Косолапов

    Опять коды :| Вот не люблю я их. В новой теме, кнопку вверх, поставил плагином. Так как код кнопок вверх, вниз, прокрутка и пауза не сработал. Но получилось довольно не плохо. :mrgreen:

  2. Степан => автор блога Степан => автор блога

    В кодах ничего сложного нет, нужно просто попробовать. А лучше, просмотреть основы HTML и тогда, возможно, Вы, Андрей, полюбите кода :)

  3. Андрей Косолапов

    Ой, наверное я с ними не подружусь никогда. Интересно конечно, но и боязно как то. :shock:
    А урок первый, я изучал уже давно, вроде все понятно, но иногда такое вылазит что жуть. :evil:

  4. Степан => автор блога Степан => автор блога

    Что именно вылазит? Кракозя́бры?

  5. Андрей Косолапов

    Ну на счет кракозяблов, это кодирова. Это легко. Просто иногда вот не получается, хоть убей :mrgreen:

  6. Людмила Лао

    Только вчера поставила себе “вверх” на сайт. При помощи плагина Smooth Scroll Up. Очень удобный плагин, легко настраивается, имеет ряд способов вывода кнопки.

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4573