Понадобилось сделать эффект, чтобы при прокрутке колесом мыши страничка прокручивалась до следующей секции в навигации или до предыдущей, в зависимости от направления прокрутки. Следилкой пунктов меню воспользовалась из bootstrap.
function addEvent(elem, type, handler){
if(elem.addEventListener){
elem.addEventListener(type, handler, false);
} else {
elem.attachEvent('on'+type, handler);
}
return false;
}
function scrollDirection(){
var weelEvt = (/Firefox/i.test(navigator.userAgent)) ? 'DOMMouseScroll' : 'mousewheel',
el = document.body;
addEvent(el, weelEvt, function(e){
var evt = e.originalEvent ? e.originalEvent : e,
delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta;
e.preventDefault();
var anchor = $('li.active a');
if (delta < 0) {
// вниз
anchor = anchor.parent().next().find('a');
} else if (delta > 0) {
// вверх
anchor = anchor.parent().prev().find('a');
}
if ($(anchor.attr('href')).offset() != undefined) {
anchor.click();
}
});
}
// Для jQuery - просто вызываем функцию после загрузки DOM
$(function(){
scrollDirection();
});
Здесь при прокрутке определяется направление прокрутки, и в зависимости от этого берется следующий или предыдущий пункт меню, для которого дальше вызывается событие клика.
$('a.navigation[href*=#]').bind("click", function(e){
e.preventDefault();
var anchor = $(this);
$('html, body').stop().animate({
scrollTop: $(anchor.attr('href')).offset().top
}, 1000);
});
Структура меню самая обычная:
<ul>
<li class="active"><a href="#section1" class="navigation">Главная</a></li>
<li><a href="#section2" class="navigation">Аренда</a></li>
<li><a href="#section3" class="navigation">Фото</a></li>
<li><a href="#section4" class="navigation">Преимущества</a></li>
<li><a href="#section5" class="navigation">Команда</a></li>
<li><a href="#section6" class="navigation">Контакты</a></li>
</ul>
Надеюсь это еще пригодится.