jQuery scrollTo但在中间减速

Question

我正在使用一小段代码(基于' ScrollTo Posts with jQuery ',它允许您单击下一个/上一个链接,它将跳转到每个帖子的顶部.

我有我的HTML结构,所以它发布>图像>发布>图像等.

我想知道如果你点击下一个/上一个按钮是否可能,它会正常滚动到下一个帖子,但是它会悬挂/悬停在images/div之间？所以它最终完成了它的滚动,但减慢了中间的div.

这是我的jQuery代码:

$(function () {
    function a(f) {
        var b, e, c = [],
            d = $(window).scrollTop(),
            g = $('.section-slide');
        g.each(function () {
            c.push(parseInt($(this).offset()['top'], 10))
        });
        for (e = 0; e < c.length; e++) {
            if (f == 'next' && c[e] > d) {
                b = g.get(e);
                break
            }
            if (f == 'prev' && e > 0 && c[e] >= d) {
                b = g.get(e - 1);
                break
            }
        }
        if (b) {
            $.scrollTo(b, {
                duration: 1400
            })
        }
        return false
    }
    $('#next,#prev').click(function () {
        return a($(this).attr('id'))
    });
    $('.scrolltoanchor').click(function () {
        $.scrollTo($($(this).attr('href')), {
            duration: 1400
        });
        return false
    })
});

Answer 1

假设您的结构将保持静态：帖子 - >图像 - >帖子 - >图像等。您可以通过找到您将滚动到的帖子的上一张/下一张图像并首先滚动到它，然后使用回调/来完成此onAfter操作插件中的设置$.scrollTo在预定义之后触发辅助滚动，setTimeout如下所示：

$(function () {
    function scroll(direction) {
        var scroll, scrollImage, i,
            positions = [],
            here = $(window).scrollTop(),
            collection = $('.post');

        collection.each(function () {
            positions.push(parseInt($(this).offset()['top'], 10));
        });

        for (i = 0; i < positions.length; i++) {
            if (direction == 'next' && positions[i] > here) {
                scroll = collection.get(i);

                // Find Image Before Post
                scrollImage = $(scroll).prev('.image').get(0);

                break;
            }
            if (direction == 'prev' && i > 0 && positions[i] >= here) {
                scroll = collection.get(i - 1);

                // Find Image After Post
                scrollImage = $(scroll).next('.image').get(0);

                break;
            }
        }

        if (scroll) {
            // Check if Scroll Image Exists
            if (scrollImage){
                // Scroll with Image Delay
                $.scrollTo(scrollImage, {
                    duration: 750,
                    onAfter: function(){
                        setTimeout(function(){
                            $.scrollTo(scroll, {
                                duration: 750
                            });
                        }, 1000); // Change the Delay to Increase / Decrease the Hover
                    }
                });                
            } else {
                $.scrollTo(scroll, {
                    duration: 750
                });
            }
        }

        return false;
    }

    $("#next,#prev").click(function () {
        return scroll($(this).attr('id'));
    });

    $(".scrolltoanchor").click(function () {
        $.scrollTo($($(this).attr("href")), {
            duration: 750
        });
        return false;
    });
});

您可以在这里找到更新的小提琴： http: //jsfiddle.net/hfg2v/2/

我希望这有帮助。