На днях столкнулась с одностраничной версткой где все разделы на одной странице, а пункты меню это ссылки на якоря.
Для плавного перехода по якорям использовался уже готовый скрипт 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)

Оценить:|4
  
Комментировать
Раздел: JavaScript    
Просмотров: 10371
Комментариев (6)
  1. zsline
    06.07.2013 в 19:01

    классный сайт, Оля!!! красивый и ничего лишнего. спасибо за статью))

  2. Greg
    Григорий Кочнев [Greg]
    06.07.2013 в 23:08

    Да, Оля вообще красава!

  3. Ольга [Olga]
    08.07.2013 в 19:53

    Спасибо!

  4. dimka
    Dimka Klusevich [dimka]
    06.11.2013 в 09:17

    На сайте меню подглючивает, пункт меню галереи не отрабатывает.. Небольшой баг) А так все здорово.

  5. avedent
    Андрей Денисюк [avedent]
    06.11.2013 в 15:24

    Спасибо за полезную статью! Делал плавающее меню на сайте. Правда, JS можно немного сократить, потому что если в меню будет состоять больше чем с 3-х пунктов, код не очень красиво будет выглядеть со всеми этими операторами сравнения;)

    Можно написать что-то типо этого:

    function scroll_active() {
    
    		$('[data-container=page]').each(function(){
    			var window_top = $(window).scrollTop();
    			var position = $(this).offset().top;
    
    			if (window_top > position) {
    				$("#floating_menu .container ul li").removeClass("active");
    				$('a[href="#'+ $(this).find('.categores-cover').attr('id') +'"]').parents('li').addClass("active");
    			}
    		});
    	}
    
    	jQuery(function() {
    		jQuery(window).scroll(scroll_active);
    	});

    Преимущества:
    — Мы не привязываемся к классам и айдинкам;
    — Дав дата атрибут нужным ссылкам меню мы избавляемся от огромной структуры операторов if-else;
    — Универсальный и минималистический код.

    P.S В любом случае, спасибо Ольга за статью!

  6. Xap4o
    Роман [Xap4o]
    08.06.2014 в 08:39

    сайт не работает и ссылка битая =(

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