Javascript 在悬停时缓慢滚动div的内容，在mouseoff时停止

请看看这个

我试图在图库的顶部和底部实现两个箭头，这样当人们将鼠标移到箭头上时，内容将分别滚动到顶部和底部

下面是我当前使用的代码，当您将鼠标悬停在底部箭头上时，它会向下滚动内容。但有两个问题：

我希望在用户鼠标离开时停止滚动

如果没有更多要滚动的内容，希望不要显示箭头

if ( $("body").hasClass('projects') ) {
    $("#jig1").height($(document).height() - 187);

    $("#scroll-to-bottom").hover(
        function () {
            $("#jig1").animate({ scrollTop: $(document).height() }, 10000);
        },
        function () {

        }
    );
}

有人能提供改进的解决方案吗？

试试以下方法：

$("#scroll-to-bottom").mouseover( function () {
   $("#jig1").animate({ scrollTop: $(document).height() }, 10000);
});

$("#scroll-to-bottom").mouseout( function () {
   $("#jig1").stop()
});

试试这个：

$("#scroll-to-bottom").mouseover( function () {
   $("#jig1").animate({ scrollTop: $(document).height() }, 10000);
});

$("#scroll-to-bottom").mouseout( function () {
   $("#jig1").stop()
});

---

第二个问题的答案。 将内部包装器添加到divs块 Html应该是这样的

<div id="jig1">
   <div id="jig1Inner">
     ... here put rest of the code

---

第二个问题的答案。 将内部包装器添加到divs块 Html应该是这样的

<div id="jig1">
   <div id="jig1Inner">
     ... here put rest of the code

---

哇，太棒了。我不知道停止（）。有没有关于当我到达终点时如何隐藏箭头并在用户返回时再次显示箭头的建议？哇，太棒了。我不知道停止（）。关于如何在我到达终点时隐藏箭头并在用户向后滚动时再次显示它的任何建议？感谢Infira提供完整的答案。不过，我正在使用第三方插件创建该图库。布局是在一个有点难以注入该内部div的地方定义的。如果您的代码需要该内部div，那么我是否可以在页面加载时将所有内容包装在其中，然后运行您的代码，而不在第三方插件上更改代码？如果您可以更改html，那么在代码“$（“#jig1”）.height（$（document）.height（）-187）；“pu这行代码$（“#jig1”）.children（）.wrapAll（”）；谢谢，我有你的解决方案。看起来很棒。谢谢英菲拉的完整回答。不过，我正在使用第三方插件创建该图库。布局是在一个有点难以注入该内部div的地方定义的。如果您的代码需要该内部div，那么我是否可以在页面加载时将所有内容包装在其中，然后运行您的代码，而不在第三方插件上更改代码？如果您可以更改html，那么在代码“$（“#jig1”）.height（$（document）.height（）-187）；“pu这行代码$（“#jig1”）.children（）.wrapAll（”）；谢谢，我有你的解决方案。看起来很棒。