Javascript 滚动到另一个元素后从开始开始启动动画

在我的页面上，我有一些动画。当我滚动整个页面时，我希望确保动画从头开始，而不是在我的页面上已经完成动画。 看看这个：

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“#动画”）.animate（{左：'250px'}）；
});
});
html，正文{
身高：100%；
}
.首先{
背景颜色：绿色；
身高：100%；
宽度：100%；
}
.第二{
背景颜色：黄色；
身高：100%；
宽度：100%；
}
.第三{
背景色：红色；
身高：100%；
宽度：100%；
}
.按钮{
位置：绝对位置；
利润率最高：50%；
}
.动画{
背景:#98bf21；
高度：100px；
宽度：100px；
位置：绝对位置；
利润率最高：20%；
}

启动动画
点击按钮开始动画

现在，每次我向上滚动到绿色或红色div，我都希望在动画之前将块放置在第一个位置。
块
您可以这样做

$("#animation")
    .animate({left: '250px'})
    .animate({left: '0px'});

链接另一个动画以重置块的位置
您有一个很好的JS库，可以满足您的需要。它叫斯摩夫

CSS


html，正文{
身高：100%；
}
.首先{
背景颜色：绿色；
身高：100%；
宽度：100%；
}
.第二{
背景颜色：黄色；
身高：100%；
宽度：100%；
}
.第三{
背景色：红色；
身高：100%；
宽度：100%；
}
.按钮{
位置：绝对位置；
利润率最高：50%；
}
.动画{
背景:#98bf21；
高度：100px；
宽度：100px；
位置：绝对位置；
利润率最高：20%；
左：300px；
不透明度：1！重要；
}

HTML


启动动画
点击按钮开始动画

现在，每次我向上滚动到绿色或红色div，我都希望在动画之前将块放置在第一个位置。
块

JS


$（文档）.ready（函数（）{
$（'.block'）.smoove（{offset:'10%}）；
});

这里有一个简单的例子，但你可以用你自己的方式

如果要在有人滚动时重置动画，则需要删除元素的“样式”属性，如下所示：

$（“#动画”）.removeAttr（'style'）

您必须在“窗口”选择器的下一行添加scroll（）。
以下是您的解决方案：

$(document).ready(function(){
$("button").click(function(){
    $("#animation").animate({left: '250px'});
});
$(window).scroll(function(){
   $("#animation").css({left: '10px'});
});

}))
 谢谢。然而，我的例子只是我案例的简化版本。我已经有类似的问题了，我的问题涉及到其他问题。所以我想要的是确保每次我滚动到另一个不包含动画的div时，当我滚动回包含动画的div时，动画从一开始就开始了。我认为这将包括滚动、高度方法，但我无法应用它们。然后，您可以跟踪包含动画框的div的滚动位置，每当该div从顶部或底部进入视图时，重置动画框的位置。这在示例中确实有效。然而，我有问题与真正的网页我的工作。无法识别此条件：如果（$（文档）.scrollTop（）<$（'#第一节'）.offset（）.top | |$（文档）.scrollTop（）==$（'#第三节'）.offset（）.top）。你知道吗？你也许应该用$（窗口）来代替，或者展示你真正的代码。你们得到了什么样的错误？啊，我已经改变了条件的顺序，我把第一名放在第三节，然后是第一节。现在它工作了！
<div id="first" class="first"></div>
<div id="second" class="second">
<button id="button" class="button">Start Animation</button>
Click on the button Start Animation!<br>
Now every time I scroll up to green or red div, I want Block to be placed at the first position before animation.
<div id="animation" class="animation block" data-move-x="-300px">Block</div>
</div>
<div id="third" class="third"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-smoove/0.2.6/jquery.smoove.min.js"></script>

<script>
$(document).ready(function(){
    $('.block').smoove({offset:'10%'});
});
</script>

$(document).ready(function(){
$("button").click(function(){
    $("#animation").animate({left: '250px'});
});
$(window).scroll(function(){
   $("#animation").css({left: '10px'});
});