6

我正在使用一段简单的代码（基于“带有 jQ​​uery 的 ScrollTo Posts ”，它允许您单击下一个/上一个链接，它会跳转到每个帖子的顶部。

我有我的 HTML 结构，所以它是 post > image > post > image 等。

我想知道是否有可能如果您单击下一个/上一个按钮，它会正常滚动到下一个帖子，但它会挂起/悬停在中间的图像/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
    })
});
4

2 回答 2

1

假设您的结构将保持静态：post -> image -> post -> image 等。您可以通过找到要滚动到的帖子的上一个/下一个图像来完成此操作，然后首先滚动到它，然后使用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/

我希望这有帮助。

于 2013-02-26T16:46:05.540 回答
1

发生这种情况是因为您正在使用视差滚动库 (Stellar.js)，它使不同的元素以不同的速度滚动。

一个可能的解决方法是在当前视口中没有元素时以更高的速度滚动，直到下一个元素的边缘刚刚离开屏幕，然后立即以原始滚动速度滚动，直到视口中再次没有元素，并不断重复此操作，直到达到所需的滚动偏移量。

编辑：

抱歉，在我写答案时出现了一些问题，我没有时间完成代码。

但是，在研究了一段时间后，我开始认为我提出的解决方案行不通。我在想一些事情：

$(window).scrollTo(640, {onAfter: function () {
    var scrollRatio = 3;
    var distance = 855 - 640;

    $(window).scrollTo(855, {
        easing: 'linear',
        duration: distance * scrollRatio / speed,
        onAfter: function () {
            var scrollRatio = 1;
            var distance = 1200 - 855;
            $(window).scrollTo(1200, {
                easing: 'linear',
                duration: distance * scrollRatio / speed,
                onAfter: function () {
                    var scrollRatio = 3;
                    var distance = 1280 - 1200;
                    $(window).scrollTo(1280, {
                        easing: 'linear',
                        duration: distance * scrollRatio / speed
                    });
                }
            });
        }
    });
}});

如果您将前面的代码粘贴到问题中提供的网站 ( http://dev.du.st/field-station/ ) 中，您将被带到第一个元素，它会尝试将您滚动到下一个元素一个使用我描述的方法。我对偏移值进行了硬编码，因为我仍在试验它。但是，我认为这种方法行不通，因为它仍然感觉不对。这是因为在动画中间立即改变速度总是很明显。

现在，我认为减轻视差滚动导致的缓慢滚动感觉的最佳方法是使用不同的缓动函数。毕竟，让背景图片变慢，正是您使用视差滚动的目的。

以下代码在您的网站中运行时，将使所有动画默认使用“easeOutCirc”作为其缓动功能，经过一些试验，我发现它是使滚动感觉最不奇怪的一种：

// Add the jQuery-easing plugin, needed for the more sophisticated easing functions.
$.getScript('//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js');

// Set easeOutCirc as the default easing.
jQuery.easing.def = 'easeOutCirc';

您可以在此网站上找到更多缓动功能

一旦你完成了实验，如果你决定使用缓动（你可以使用不同的缓动来向上和向下滚动），那么你应该保持默认缓动，只需通过添加来更改滚动动画中的缓动{easing: EASING_NAME}到scrollTo函数中的选项散列。所以你的代码看起来像这样：

$.scrollTo($($(this).attr("href")), {
    duration: 750,
    easing: 'easeOutCirc'
});
于 2013-03-01T10:01:43.033 回答