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问题取决于Firefox如何设置溢出，它将其置于html级别，而不是像其他浏览器一样body。要让它工作，您必须使用以下命令定义滚动操作：

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

});

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

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

1 个答案: