Прокрутка для одностраничного сайта с навигацией

Понадобилось сделать эффект, чтобы при прокрутке колесом мыши страничка прокручивалась до следующей секции в навигации или до предыдущей, в зависимости от направления прокрутки. Следилкой пунктов меню воспользовалась из 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>

Надеюсь это еще пригодится.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

code