• Главная
• Видеоуроки
• PHP
• JavaScript
• CSS
• HTML
• Сервисы
• Статьи
• Оффтоп

• Главная
• ->
• Материалы
• ->
• Плавная прокрутка страницы вверх на jQuery

Плавная прокрутка страницы вверх на 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 с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:

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

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

Наверх