Как сделать кнопку «наверх» с использованием CSS3 и jQuery

Я думаю тема не новая. Многие уже видели и знают как сделать кнопку «Наверх», которая бы плавно прокручивала страницу к верху. Видел несколько вариантов, но все они не впечатлили. А вот вчера попался довольно интересный и грамотно сделанный вариант. Интересен прежде всего минимализмом и использованием CSS3, по которому я пишу цикл статей CSS3 Для начинающих. В данном примере используются свойства CSS3 transition и border-radius, а так же jQuery для наведения красоты.

[adsense]
Как выглядит эта кнопка в действии вы можете посмотреть у меня на сайте. Я ее немного переделал под свои нужды. При желании я думаю сможете и вы. Сейчас я хочу вам привести перевод англоязычной статьи.

Для того чтобы сделать кнопку «наверх» нам понадобится заготовка — стрелка отрисованная где вам удобно. Если рисовать не хотите — можете скачать готовую тут.

Подготовим CSS стили для кнопки:

#back-top {
	position: fixed;
	bottom: 30px;
	margin-left: -150px;
}

#back-top a {
	width: 108px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #000;
}

/* arrow icon (span tag) */
#back-top span {
	width: 108px;
	height: 108px;
	display: block;
	margin-bottom: 7px;
	background: #ddd url(up-arrow.png) no-repeat center center;

	/* rounded corners */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {
	background-color: #777;
}

В принципе для того чтобы кнопка заработала достаточно сделать следующее:

• прописать эти стили в файле css вашей темы
• скопировать картинку со стрелкой в нужную папку (не забудьте поменять параметр у стиля #back-top span)
• в файлы index.php, single.php, page.php, archive.php, author.php, category.php, tag.php вашей темы после цикла loop прописать следующее:

  К началу

Это простой вариант без «украшательств». А если быть точнее без использования jQuery.
Если использовать jQuery, то мы во-первых можем добиться плавного прокручивания страницы к верху, а во-вторых, показывать нашу кнопку «вверх» только тогда, когда мы использовали скрол вниз. То есть при загрузке страницы кнопки видно не будет. Как только посетитель сайта начнет пролистывать сайт вниз — кнопка появится.

Для использования библиотеки jQuery нам требуется ее подключить. Сделать это можно в файле header.php вашей темы. Если данная библиотека у вас уже подключена, то повторно подключать ее не нужно. Итак, для подключения библиотеки jQuery в файл header.php нужно вставить следующую строку:

После подключения бибилиотеки, мы возвращаемся в файлы
index.php, single.php, page.php, archive.php, author.php, category.php,
tag.php и сразу же после кода нашей кнопки вставляем следующий JavaScript код:

После данных манипуляций вы должны получить плавно появляющуюся кнопку, при наведении мышки на нее она должна становиться более темной. Прокрутка страницы должна быть плавной. В начале страницы кнопка не должна быть видна.

Статья делаем кнопку «Вверх» двумя способами предлагает вам еще два решения для создания кнопки «Вверх.»

Если вы присматриваете земельный участок или коттедж по каширскому шоссе, то загляните на сайт компании «Инвест-недвижимость» http://www.invst.ru/kashirskoe.php.

На этом данную статью заканчиваю. Остались вопросы? Задавайте их в комментариях. Удачного дня!