jQuery scrollTo для детей

Question

Я играю с jQuery scrollTo, пытаясь сделать сайт с гладкой прокруткой и полными разделами тела. Прокрутка и переходы работают нормально, за исключением того, что при прокрутке вверх из первого раздела сценарий выделяет панель навигации как раздел, а не остается в разделе 1.

Пример: http://jsfiddle.net/8jh3qt5c/2/

Вот как выглядит навигация:

<div id="header">
  <ul id="nav">
    <li><a href="#section-1">Section 1</a>
    </li>
    <li><a href="#section-2">Section 2</a>
    </li>
    <li><a href="#section-3">Section 3</a>
    </li>
  </ul>
</div>

А вот и scroll.js:

var $current, flag = false;

$(function() { 
$('#nav').onePageNav();

$('body').mousewheel(function(event, delta) {
    if (flag) { return false; }
    $current = $('div.current');

    if (delta > 0) {
        $prev = $current.prev();

        if ($prev.length) {
            flag = true;
            $('body').scrollTo($prev, 500, {
                onAfter : function(){
                    flag = false;
                }
            });
            $current.removeClass('current');
            $prev.addClass('current');
        }
    } else {
        $next = $current.next();

        if ($next.length) {
            flag = true;
            $('body').scrollTo($next, 500, {
                onAfter : function(){
                    flag = false;
                }
            });
            $current.removeClass('current');
            $next.addClass('current');
        }
    }

    event.preventDefault();
});

});

Кажется, я не могу найти способ исключить навигационную панель из прокрутки, поэтому прокрутка вверх на первой панели не будет иметь никакого эффекта.

Кроме того, когда вы обновляете страницу в нижнем разделе, есть ли способ сбросить текущий видимый раздел в первый, поскольку сейчас окно остается включенным, в зависимости от того, что было текущим.

Любая помощь будет принята с благодарностью!

Answer 1

Вы не проверяете, являются ли prev и next действительными элементами. Вот лучший подход, не проверял корректировку, если есть небольшая проблема.

$(function() { 
  $('#nav').onePageNav();

  $('body').mousewheel(function(event, delta) {
    event.preventDefault();

    var $current = $('div.current');
    if ($current.is(':animating')) return;

    var $next = delta > 0 ? $current.prev() : current.next();
    if (!$next.hasClass('section')) return;

    $current.removeClass('current');
    $next.addClass('current');
    $(window).scrollTo($next, 500);
  });
});

Кстати, если вы используете scrollTo, использовать onePageNav - пустая трата времени. Вы можете сделать то же самое, включив localScroll, который использует scrollTo и не переопределяет все это.

В качестве альтернативы, вы можете реализовать это в ближайшее время, как это:

// Bind to the click of all links with a #hash in the href
$('a[href^="#"]').click(function(e) {
  e.preventDefault();
  $(window).stop(true).scrollTo(this.hash, {duration:500, interrupt:true});
});