如何制作滚动按钮？

Question

我想隐藏溢出，而是在页面上放置一个div，你可以将鼠标悬停在它上面，它会向下滚动。我似乎无法弄清楚如何实现这一目标。我在网上搜索过，没有运气。我知道这可能需要一些jquery但我并不积极。

Answer 1

假设这是您的HTML：

<div id="button">Scroll down</div>
<div id="container">
    <p>Your text or content here.</p>
</div>

基本上，您需要使用按钮的jQuery悬停功能，然后使用容器的动画：

$('#button').hover(function(){
    $('#container').animate({scrollTop: $('#container')[0].scrollHeight}, 2500);
});​

Answer 2

尝试this

---

您可以使用绝对定位和jQuery的.animate()和.stop()方法来完成此任务。

要使div向上滚动：

$("div.content").stop().animate({top: "-400%"}, 5000); 
//Let's say the div is 500% tall

让div停止移动：

$("div.content").stop();

要使div向下滚动：

$("div.content").stop().animate({top: "0"}, 5000);

---

当然，唯一的问题是它没有按比例分配滚动所需的时间，所以如果你从底部开始只有50％，你试图滚动到底部，它仍然会即使从顶部滚动需要5秒钟，也需要5秒钟。

您可以通过使用top的值并将其除以`（height（） - 100％）来解决此问题。

---

JSFiddle