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});
});