Одностраничный сайт с использованием jquery и smorth scroll

Немного примеров подобных сайтов:

• http://www.creativeswitch.net/
• http://www.creativemints.com/
• http://www.catalytic-design.com
• http://www.barrelny.com
• http://crystaleyes.in/

Если вы обратили внимание у всех этих сайтов просматривается проблема с навигацией, а именно не посвечивается тот пункт меню в разделе которого я нахожусь. Первое что приходит на ум - вывод меню в каждой секции с изменением активного пункта меню ( пример www.catalytic-design.com), но есть более изящное решение с использованием якорных ссылок и библиотеки jquery. Приступим к реализации.

1. Создаем структура сайта.

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

Пример 1

2. Создаем правную прокрутку при переходе по якорной ссылке

Не стану лукавить,  код был взят с известного блога css-tricks.com используя этот код мы создаем эффект smorth scroll. Достаточно вставить этот код в тело кода и все якорные ссылки будут прокручиваться с плавным эффектом (не забудьте, для работы данного скрипта необходимо подключить библиотеку jquery)

Пример 2

3. Реализация активного пункта меню

 Подключаем небольший плагин jquery viewport

Добавляем скрипт который будет определять текущую секцию и подсвечивать соответствующий пункт меню:

// add & remove active link
$(document).ready(function() {
	$(window).scroll(function () {
		var inview = '#' + $("section > article:in-viewport:first").parent().attr('id'),
				$link = $('nav a').filter('[hash=' + inview + ']');

		if ($link.length && !$link.is('.selected')) {
			$('nav a').removeClass('selected');
			$link.addClass('selected');
		}
	})
});

пример 3

и получаем готовое решение,  которое вы можете оформить по своему усмотрению