如何制作滚动按钮？

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

试试

您可以使用绝对定位和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%)来修复此问题。