I'；我试图制作一个迭代jQuery滚动动画，在同一个div类的多个实例之间滚动，并在其间暂停

此功能的工作方式：

1）用户单击ID为“surf”的按钮，动画开始

2）该函数查找类为“threadboard”的div的第一个实例，在那里暂停1.5秒，然后平滑地向下滚动到类为“threadboard”的div的下一个实例，在那里暂停1.5秒，然后平滑地滚动到下一个实例，依此类推

3）函数应该通过类为“threadboard”的div的所有实例执行此操作，然后结束

我尝试将jQuery与方法

scrollTop（）

、

each（）

、

animate（）

和

setTimeout（）

结合使用，迄今为止，成功率参差不齐。以下是我到目前为止所做的（编辑：以包括工作但不完善的代码）：

var currentIndex=0；
var numDivs=18；
$（窗口）。加载（函数（）{
$（“#冲浪”）。单击(
函数（）{start（）；}
);
});
函数start（）{
//如果（numDivs>0）{
var winY=window.screenY；
$（“body”）.animate（{scrollTop:225*currentIndex}，1100）；
//
currentIndex=（currentIndex+1）%numDivs；
设置超时（启动，3000）；
//}
}

现在我意识到我使用的是一种盗版方法，通过估计每个实例相距一定数量的像素，并对实例数量进行硬编码，这并不理想。编写此函数的最佳方法是什么？代码将在

中实现，这是我的快照：

基本上，我检查

.threadboard

的每个存在的顶部位置，迭代每个位置，向计时器添加一个值并让它运行

创建取消按钮应该像

clearTimeout（）

一样简单

由原始海报进行最终编辑，修改代码可在所有浏览器中使用。最终解决方案是使用

body，html

，而不是

body

或

html

，前者适用于webkit浏览器，后者适用于非webkit浏览器。函数和超时也必须移出

$（文档）.ready（函数（）{

）的范围。下面的代码现在反映了编辑后的解决方案：

var timeOut = 1500;

function startSurf(winY) {
//new timeout function
setTimeout(function () {
    //the page neesd to be animated (relative of course, careful)
    $('body').animate({

        //animate the scroll
        scrollTop: winY

        //scroll speed
    }, 'fast');

    //our timer needs to be declared outside the functin so it doesn't just jump to the end.
}, timeOut);

//add 1.5 seconds for each iteration loop or it will try to jump to the end.
timeOut += 1500;
}
$(document).ready(function () {
$('#surf').click(function () {
    var numThreads = $('.threadboard');

    $.each(numThreads, function (index, obj) {
        //the position of the object
        var position = $(obj).position();

        //the top position of the object (relative of course, careful)
        var winY = position.top;

        //on the first iteration
        if (index == 0) {
            $('body').animate({
                scrollTop: winY
            }, 'fast');

            //for every iteration after
        } else {
            startSurf(winY);
        }
    });
});
});

这是我的照片：

基本上，我检查

.threadboard

的每个存在的顶部位置，迭代每个位置，向计时器添加一个值并让它运行

创建取消按钮应该像

clearTimeout（）

一样简单

由原始海报进行最终编辑，代码经过修改，适用于所有浏览器。最终解决方案是使用

正文，html

，而不是

正文

或

html

，前者适用于webkit浏览器，后者适用于非webkit浏览器。功能和超时也必须是mov已超出

$（文档）.ready（函数（）{

）的范围。下面的代码现在反映了已编辑的解决方案：

var timeOut = 1500;

function startSurf(winY) {
//new timeout function
setTimeout(function () {
    //the page neesd to be animated (relative of course, careful)
    $('body').animate({

        //animate the scroll
        scrollTop: winY

        //scroll speed
    }, 'fast');

    //our timer needs to be declared outside the functin so it doesn't just jump to the end.
}, timeOut);

//add 1.5 seconds for each iteration loop or it will try to jump to the end.
timeOut += 1500;
}
$(document).ready(function () {
$('#surf').click(function () {
    var numThreads = $('.threadboard');

    $.each(numThreads, function (index, obj) {
        //the position of the object
        var position = $(obj).position();

        //the top position of the object (relative of course, careful)
        var winY = position.top;

        //on the first iteration
        if (index == 0) {
            $('body').animate({
                scrollTop: winY
            }, 'fast');

            //for every iteration after
        } else {
            startSurf(winY);
        }
    });
});
});

---

我去尝试实现你的方法，但没有得到任何结果。然而，在此期间，我确实编写了另一个函数来完成这项工作，但仍然不完善，并且使用了一些全局变量和硬编码的东西。让我们看看我们是否能将这两个想法联系起来，并取得一些成果！我将在原始帖子中添加半工作代码：@wnajar没问题-我已经知道你需要什么了，我会很快给你一个解决方案。@wnajar请设置我的更新代码。如前所述，我已经复制并粘贴到Firebug中并运行了它。它每1.5秒滚动到每个

。threadboard

的顶部。如果这不是你想要的，请告诉我。它丢失了现在单击处理程序和实现。因此我们仍然可以使用

$（window）.load（function（）{$（'#surf'）。单击（function（）{startSurf（winY）；}）

但我们如何传递winY参数？我将您的代码粘贴到Chrome控制台，它会找到预期的线程板，但没有代码执行，单击处理或滚动。想法？不确定我是否只是缺少一些内容…我没有将事件添加到任何内容，因为我想给您一个选项。我看不到#如果您只需将我提供给您的代码粘贴到$（#surf'）内。单击（function（）{

我粘贴的代码放在这里

}），然后单击

#surf

元素，这将按照所述工作。我去尝试实现您的方法，但没有得到任何结果。然而，与此同时，我确实编写了另一个函数来完成这项工作，但仍然不完善，并且使用了一些全局变量和硬编码的内容。让我们看看是否可以将这两个想法和ge连接起来我会在原始帖子中添加半工作代码：@wnajar没问题-我已经知道你需要什么了，我会很快回来为你的问题提供解决方案。@wnajar请设置我的更新代码。如前所述，我已经复制并粘贴到Firebug中并运行了它。它会滚动到每个

.threadboard

eve的顶部ry 1.5秒。如果这不是您想要的，请告诉我。它现在缺少单击处理程序和实现。因此我们仍然可以使用

$（窗口）。加载（function（）{$（'#surf'）。单击（function（）{startSurf（winY）；}）

但我们如何传递winY参数？我将您的代码粘贴到Chrome控制台，它会找到预期的线程板，但没有代码执行，单击处理或滚动。想法？不确定我是否只是缺少一些内容…我没有将事件添加到任何内容，因为我想给您一个选项。我看不到#如果你只是简单地将我提供给你的代码粘贴到$（'#surf'）中。单击（function（）{

code我粘贴的代码在这里

}），然后单击

#surf

元素，这将按描述工作。你的关键部分是错误的