Плавная прокрутка в любое место страницы

На этом сайте есть статья как сделать плавную прокрутку страницы вверх, когда положение полосы прокрутки браузера достигает конца страницы с появлением кнопки “Вверх”.

В этой статье рассмотрим как сделать плавную прокрутку страницы в указанное положение страницы по клику по ссылке, например пункта меню навигации.

Такая прокрутка реализуется в 3 шага:

1. Написание html-разметки кнопки.

2. Добавление css-стилей.

3. Написание javascript кода, который и отвечает за работу плавной прокрутки страницы.

1. HTML – разметка

1.1 Разметка меню. Значение # в ссылке href, должно совпадать с id блока, к которому должна прокрутиться страница

<nav>
	<ul>
		<li><a href="#about" title="">О компании</a></li>
		<li><a href="#production" title="">Производство</a></li>
		<li><a href="#delivery" title="">Доставка</a></li>
		<li><a href="#contacts" title="">Контакты</a></li>
	</ul>
</nav>

1.2. Разметка блоков

<div id="about">Тут какой-то текст, картинки и пр.</div>

<div id="production">Тут какой-то текст, картинки и пр.</div>

<div id="delivery">Тут какой-то текст, картинки и пр.</div>

<div id="contacts">Тут какой-то текст, картинки и пр.</div>

2. CSS – разметка

Как таковой специальной css-разметки, влияющей на работу данного скрипта нет. Все зависит от вашего дизайна.

3. Javascript

Первым делом подключаем библиотеку jQuery. Для этого перед закрывающемся тегом head вставляем код (если у вас уже был подлкючен jQuery, то ничего подключать не нужно.):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Далее приведен код, который можно вставить в тело страницы или вывести в отдельный javascript файл. Скрипт берет содержимое href пункта меню (elementClick), по которому щелкнули, затем ищет id с таким же значением (destination) и потом происходит перемещение страницы в точку destination

Таким образом при клике по ссылке любого пункта меню произойдет анимированная прокрутка к нужному блоку.

$(document).ready(function(){
	// плавное перемещение страницы к нужному блоку
	$("nav li a").click(function () {
		elementClick = $(this).attr("href");
		destination = $(elementClick).offset().top;
		$("body,html").animate({scrollTop: destination }, 800);
	});
});

800 – это время в мс, за которое нужно сделать перемещение страницы.

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