вход

Плавная прокрутка наверх

Плавная прокрутка наверх

Здравствуйте уважаемые читатели блога mainview.ru. Сегодня рассмотрим небольшой пример того, как сделать плавную прокрутку наверх страницы. Иногда страница может быть достаточно длинная и прежде чем читатель дойдет до конца, он несколько раз сделает прокрутку экрана. Добравшись до низа страницы, ему снова нужно прокручивать несколько экранов вверх. Вот здесь и пригодиться наш сегодняшний прием. Нажав на одну кнопку, страницы сама плавно перейдет к началу.

Все это очень просто сделать при помощи JQuery (это займёт всего несколько строк кода). Сама кнопка прокрутки наверх не отображается постоянно. Код всегда проверяет, если полоса прокрутки верхней позиции больше определенного значения, то кнопка появляется. Если вы находитесь в верхней части страницы, то кнопку не видно. После нажатия на ссылку, страница плавно прокручивается к самом верху.

Как это выглядит

Вы можете посмотреть демонстрационный пример, чтобы увидеть все это в действии.

Дизайн и CSS

Для нашей будущей кнопки мы должны определить всего один элемент. Назовем его #back-top. Это может быть тег <p> или <div>, не важно. Главное здесь то, что мы должны задать ему фиксированное положение на странице. Самое лучшее в этом примере привязать его к самому низу страницы. Вот начальный код:

<p id="back-top">
    <a href="#top" title="Перейти наверх страницы">наверх</a>
</p>
Можно использовать и так, но мне захотелось добавить графическую стрелку. Поэтому окончательный вариант у меня выглядит вот так:
<p id="back-top">
<a href="#top" title="Перейти наверх страницы"><span></span><em>наверх</em></a>
</p>

Далее прописываем CSS правила для заданной структуры

/*
Back to top button 
*/
#back-top {
    margin:0;
    padding:0;
	position: fixed;
	bottom: 30px;
	margin-left: -150px;
	clear: both;
    display:block;
    
}
#back-top a {
    padding: 0;
    margin: 0;
    height: 40px;
    width: 100px;
    display: block;
    text-decoration: none;
    color: #bbb;
	/* background color transition */
	-webkit-transition: background-color .7s;
	   -moz-transition: background-color .7s;
         -o-transition: background-color .7s;
            transition: background-color .7s;
    
}
#back-top a:focus {
    outline:none;
}
#back-top a:hover {
	color: #000;
}

#back-top a em {
    letter-spacing: 1px;
    line-height:40px;
    float: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding-right: 5px;
    font-style: normal;
}


/* arrow icon (span tag) */
#back-top span {
    float:right;
	width: 40px;
	height: 40px;
	display: block;
	margin-bottom: 7px;
	background: #eee url(button.png) no-repeat center center;
	/* rounded corners */
    -webkit-border-radius: 20px;
       -moz-border-radius: 20px;
            border-radius: 20px;
	/* background color transition */
         -webkit-transition: 1s;
            -moz-transition: 1s;
                 transition: 1s;
}
#back-top a:hover span {
    background-color: #ddd;
}

jQuery

И чтобы завершить создание эффекта плавной прокрутки к началу страницы, мы используем приведённый ниже код Javascript. Вы можете его вставить на свою страницу. Не забудьте только подключить саму библиотеку jQuery.

В начале данный скрипт прячет нашу кнопку (в моем случае это <p id="back-top">), ведь мы находимся в начальной области страницы, и нам она не нужна.

Затем он проверяет, находится ли окно прокрутки в верхней позиции (scrollTop) и его значение больше 100. Если да, то элемент # back-top начинает плавно появляться, иначе плавно исчезает. Дальше следует функция, которая срабатывает при нажатии мышкой. Если нажатие произошло, то скрипт начнет перемещать страницу до тех пор, пока значение scrollTop не будет равно 0.

<script type="text/javascript">
$(document).ready(function(){

	// hide #back-top first
	$("#back-top").hide();
	
	// fade in #back-top
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});

		// scroll body to 0px on click
		$('#back-top a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});

});
</script>

Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
4 комментария

Статья → Плавная прокрутка наверх

  1. Nch:

    нифига чето не покатило :((((

  2. Все работает классно. В Хроме и Фоксе. А вот в Опере жуткие тормоза из-за этой кнопки. Скроллить страницу просто невозможно(((

  3. Gobo:

    Вот более рабочая:)
    http://davidwalsh.name/dw-content/top-of-page-jquery.php
    особенно в фоксе и хроме

  4. Iron:

    Всё работает супер. И в Опере 11 и в Лисе 6.02. и в Хроме 15

    Так что обновляйте свои браузеры и не забудьте подключить библиотеку jQuery!!!
    Вот код:

Оставить комментарий

Статья → Плавная прокрутка наверх

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.