Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный Курс "Практика HTML5 и CSS3"

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Начать->

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Получить в подарок->

Бесплатный курс "Сайт на WordPress"

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

*Наведите курсор мыши для приостановки прокрутки.


Плавная прокрутка страницы вверх на jQuery

Размер: 20,4 Мб.

Длительность: 8 мин. 13 сек.

Скачать видео + исходники

В этом видео мы разберем такой момент, как создание плавной прокрутки страницы вверх при клике по ссылке.

Очень часто бывает удобно воспользоваться ссылкой "Наверх", когда находишься ближе к нижней части страницы.

Можно реализовать эту возможность исключительно средствами HTML и CSS, однако в данном видео я покажу вам, как можно доработать эту функцию и сделать ее более удобной с помощью библиотеки jQuery.

JavaScript позволит нам обеспечить плавность перемещения от нижней части страницы к верхней, избежав "рывка", который происходит при использовании обычного "якоря".

Сама ссылка "Наверх" и изображение стрелки не присутствуют на странице изначально, чтобы не занимать место и не заслонять собой контент.

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

Это очень удобно еще и потому, что привлекает внимание человека к интерактивному элементу на странице и он замечает, что есть возможность воспользоваться такой функцией.

Демонстрацию работы скрипта и подробный разбор кода смотрите в видео ниже.



Краткий обзор урока (все подробности смотрите в видео):

index.html

1. Первое, что нам нужно - это файл, в котором будет размещена сама ссылка "Наверх". Пусть это будет index.html.

Для того, чтобы все работало, в секции head документа нам нужно подключить файл стилей и два JavaScript-файла (о них - чуть позже):


<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

Сначала подключаем библиотеку jQuery, затем - файл script.js с кодом, который мы пишем сами.

Также в этом файле нам нужно разместить саму ссылку, при клике по которой будет происходить плавный подъем к верхней части страницы:


<p style="margin-left: 0px;" id="back-top"><a href="#top"><span></span>Наверх</a></p>

script.js

2. Второе - это файл script.js, в котором мы прописываем функции, выполняющие основные действия:


$(document).ready(function(){

    $(function (){
		$("#back-top").hide();

		$(window).scroll(function (){
			if ($(this).scrollTop() > 700){
				$("#back-top").fadeIn();
			} else{
				$("#back-top").fadeOut();
			}
		});

		$("#back-top a").click(function (){
			$("body,html").animate({
				scrollTop:0
			}, 800);
			return false;
		});
	});
});

Итак, сначала мы дожидаемся полной загрузки документа и скрываем нашу кнопку "Наверх", чтобы изначально ее не было видно на странице.

Далее мы фиксируем событие прокрутки окна и если прокрутка идет вниз на 700 пикселей и более, то мы плавно отображаем кнопку "Наверх" с помощью метода fadeIn. В противном случае мы ее скрываем методом fadeOut.

Во второй анонимной функции мы отслеживаем событие клика по ссылке внутри блока #back-top и применяем метод animate для плавного подъема к верхней части страницы (scrollTop:0) за 800 мс.

style.css

3. И, третье - это файл стилей. В нашем примере в нем нет ничего лишнего, поэтому стилей мало:


body {
	font-size: 13px;
	line-height: 1.65em;
	font-family: Verdana, sans-serif;
}

p {
	margin-left: 150px;
}

/* Кнопка наверх */
#back-top{
	position:fixed;
	bottom:10px;
    left: 0px;
}

#back-top a{
	width:55px;
	display:block;
	text-align:center;
	font:11px/100% Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	text-decoration:none;
	background-color: transparent;
	-webkit-transition:1s;
	-moz-transition:1s;
	transition:1s;
}

/* графическая стрелка */
#back-top span{
	width:55px;
	height:1600px;
	display:block;
	margin-bottom:7px;
    background: url('../img/up-arrow.png') no-repeat bottom center;
	-webkit-transition:1s;
	-moz-transition:1s;
	transition:1s;
}

#back-top a:hover span{background-color: rgba(0, 0, 0, 0.3);}

Из того, о чем стоит упомянуть, можно назвать значение fixed для свойства position у блока #back-top. Это позволяет нам зафиксировать положение кнопки относительно окна браузера.

Далее - это использование свойства transition для обеспечения плавности появления и исчезновения элементов. И, наконец, это использование свойства background для того, чтобы наложить изображение стрелки на наш блок "Наверх".

Вот в общем-то и все. Общую схему работы вместе с кодом я привел выше, однако если этот обзор вам не до конца понятен, то изучите полную версию урока в видеоформате на этой странице выше.

Надеюсь, данный урок был для вас полезен и, конечно же, применяйте это в своих проектах!

С уважением, Дмитрий Науменко.

P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!


Смотрите также:

50 классных сервисов, программ и сайтов для веб-разработчиков

50 классных сервисов, программ и сайтов для веб-разработчиков

Как прописать DNS-серверы для домена?

Как прописать DNS-серверы для домена?

Как создать почтовый ящик со своим доменом?

Как создать почтовый ящик со своим доменом?

Как купить занятый домен?

Как купить занятый домен?

Как продлить доменное имя?

Как продлить доменное имя?

Как выбрать и зарегистрировать домен?

Как выбрать и зарегистрировать домен?

10 вещей, которые сведут с ума посетителей вашего сайта

10 вещей, которые сведут с ума посетителей вашего сайта

Добавляем будильник к цифровым часам на CSS3 и jQuery

Добавляем будильник к цифровым часам на CSS3 и jQuery

Как сделать цифровые часы с помощью CSS3 и jQuery?

Как сделать цифровые часы с помощью CSS3 и jQuery?

JavaScript без jQuery: 10 советов

JavaScript без jQuery: 10 советов

Наверх