Как сделать, чтобы прокрутка мышью до якоря нормально заработала?

Question

[Елена]

Хочу сделать прокрутку мышью к следующему якорю (по навигации). Написала код, но он странно работает, не могу понять почему.

var lastScrollTop = 0;
$(document).bind( 'mousewheel', function (e) {

    var top = $(window).scrollTop();
    var anchor = $('li.active a');

    if (lastScrollTop > top) {
        anchor = anchor.parent().prev().find('a');
    } else if (lastScrollTop < top) {
        anchor = anchor.parent().next().find('a');
    }
    lastScrollTop = top;

    $(document.body).stop().animate( {
        scrollTop: $(anchor.attr('href')).offset().top
    } , 1000);
});

PS: проблема в том, что направление неправильно определяется.

Мне нужно что-то вроде такого alvarotrigo.com/multiScroll
(без разреза)

Comments

[Алексей Уколов]

Написала код, но он странно работает

Не надо так :)

Answer 1

[Алексей Уколов]

Рекомендуют делать так:
$('html, body').animate({scrollTop:0}, 'slow');
Два тега нужны для кроссбраузерности - body используется в webkit-браузерах, html используется в firefox. Но есть сообщения годовой давности, что теперь и webkit поддерживает html.
UPD: Сам сейчас столкнулся с тем, что chrome в режиме эмуляции iPad не понимает html, пришлось добавить body.

Answer 2

[Денис Инешин]

Может проще удобный плагин? plugins.compzets.com/animatescroll

UPD: вот нашел удобный плагин, который работает по прокрутке мышкой
www.thepetedesign.com/demos/purejs_onepage_scroll_...

Comments

[Елена]

там просто переход кликом к якорю. а мне нужно по прокрутке колесом. Я бы не отказалась от такого плагина, но не нашла.

[Алексей Уколов]

Елена: этот плагин занимается именно анимированием скрола, как именно вы будете его вызывать - не важно, можете и по событию скрола.

Answer 3

[Елена]

В итоге погуглила и сделала так:

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();
        }
    });
}
$(function(){
 scrollDirection();
 });

Может, кому пригодится.