На днях столкнулась с одностраничной версткой где все разделы на одной странице, а пункты меню это ссылки на якоря.
Для плавного перехода по якорям использовался уже готовый скрипт AnchorScroller.js (файл прикреплен в конце поста)
Подключаем скрипт
А для вызова пишем в коде для всех ссылок на якоря onclick=»return anchorScroller(this)»
<a href="#page_top" onclick="return anchorScroller(this)">Главная</a>
Html код меню
<ul class="main_menu"> <li class=" active "><a href="#page_top" onclick="return anchorScroller(this)">Главная</a></li> <li><a href="#menu" onclick="return anchorScroller(this)">Меню</a></li> <li ><a href="#gallery" onclick="return anchorScroller(this)">Галерея</a></li> <li><a href="#contacts" onclick="return anchorScroller(this)">Контакты</a></li></ul>
Код написан на jquery, поэтому его необходимо предварительно подключить.
Переходы работаю, остался скрипт, который при скроллинге страницы по вертикали и при нажатии на пункт меню, подсвечивал активный пункт. Для этого был написан следующий код:
function scroll_active() { /* вычисляем значения прокрутки страницы по вертикали */ var window_top = $(window).scrollTop(); /* вычисляем положение якорей на странице от начала страницы по вертикали*/ var menu_top = $('a[name="menu"]').offset().top -10; var gallery_top = $('a[name="gallery"]').offset().top -10; /* раздел «Контакты» у меня на странице расположен самым последним разделом, и небольшой, поэтому если контаты уже отобразались на странице, тогда активирую пункт меню «Контакты» */ var contacts_top = $('a[name="contacts"]').offset().top - $(window).height() + 180; /* Переключатель активного пункта меню в зависимости от положения на странице, условии написаны от последнего якоря на странице, до первого */ /* если на экране отображаются раздел «Контакты»*/ if (window_top > contacts_top) { $(".main_menu li").removeClass("active"); $('a[href="#contacts"]').parent().addClass("active"); } /* если не отображается раздел «Контакты», но страницу прокрутили ниже якоря третьего раздела*/ else if (window_top > gallery_top) { $(".main_menu li").removeClass("active"); $('a[href="#gallery"]').parent().addClass("active"); } /* если выше третьего, но ниже якоря второго раздела*/ else if (window_top > menu_top) { $(".main_menu li").removeClass("active"); $('a[href="#menu"]').parent().addClass("active"); } /* если не подходят условия предыдущие активируем первый пункт меню*/ else { $(".main_menu li").removeClass("active"); $('a[href="#page_top"]').parent().addClass("active"); } } jQuery(function() { jQuery(window).scroll(scroll_active); });
Пример реализации Mulberrycafe.ru
Прикрепленный файл: AnchorScroller.zip (797.00 b)
классный сайт, Оля!!! красивый и ничего лишнего. спасибо за статью))
Да, Оля вообще красава!
Спасибо!
На сайте меню подглючивает, пункт меню галереи не отрабатывает.. Небольшой баг) А так все здорово.
Спасибо за полезную статью! Делал плавающее меню на сайте. Правда, JS можно немного сократить, потому что если в меню будет состоять больше чем с 3-х пунктов, код не очень красиво будет выглядеть со всеми этими операторами сравнения;)
Можно написать что-то типо этого:
Преимущества:
— Мы не привязываемся к классам и айдинкам;
— Дав дата атрибут нужным ссылкам меню мы избавляемся от огромной структуры операторов if-else;
— Универсальный и минималистический код.
P.S В любом случае, спасибо Ольга за статью!
сайт не работает и ссылка битая =(