jQuery滚动当前位置和下一个上一个导航器

Question

我需要一些建议，因为我无法在下面找到我的菜鸟头，请看这个小提琴： http ： //jsfiddle.net/NtUpw/

代码按预期工作，但是当当前div偏移量> 41并触发prev时，我希望页面返回到当前div的开头，而不是之前的那个。 知道我怎么能添加这个条件？

我意识到当前的代码并不是最干净的（实际上它是两个小提琴的组合），但我希望有人可以看一下它。 谢谢。

$('a.buttons').on('click', function (e) {
e.preventDefault();

var t = $(this).text(),
    that = $(this);

if (t === 'next' && $('.current').next('div.post').length > 0 ) {
    var $next = $('.current').next('.post');
    var top = $next.offset().top;

    $('body').animate({
        scrollTop: $('.current').next('div.post').offset().top - 40

    });

} else if (t === 'prev' && $('.current').prev('div.post').length > 0 ) {
    var $prev = $('.current').prev('.post');
    var top = $prev.offset().top;

    $('body').animate({
        scrollTop: $('.current').prev('div.post').offset().top - 40
    });
}



$(window).bind('scroll', function () {
    $('.post').each(function () {
        var post = $(this);
        var position = post.position().top - $(window).scrollTop();

        if (position <= 40) {

            post.addClass('current');
            post.prev().removeClass("current");

        } else {
            post.removeClass('current');
        }
    });
});

Answer 1

prev行动通过将div始终移动到前一个; 解决方案是检查导航器当前位置对当前div的影响：

var $prev;
var top;

var firstElem = true;
if ($('.current').prev('div.post').length > 0) {
    $prev = $('.current').prev('.post');
    top = $prev.offset().top;
    firstElem = false
}

var currTop = $('.current').offset().top;
var navBottom = $('.navigation').offset().top + 40;

if (currTop == navBottom && !firstElem) {
    $('body,html').animate({
        scrollTop: $('.current').prev('div.post').offset().top - 40
    });

有了这个，导航器只有在不在当前顶部的情况下跳转到前一个div; 或者跳到前一个。

Firefox的问题取决于火狐如何放置溢出，它把它在html水平不是body其他浏览器一样。 要让它工作，您必须使用以下内容定义滚动操作：

$('body,html').animate({

});

工作小提琴： http ： //jsfiddle.net/IrvinDominin/2QYgR/3/