jQuery Animate Div Scroll回到顶部

Question

我有一个包含内容的div：

<div id="First">There are lots of content in here. Blah Blah Blah...</div>

div的样式属性为overflow:auto;，因此如果有任何内容溢出，则会出现滚动条。我在内容结尾的div里面有一个按钮。

由于div中的内容可以允许深度滚动，无论如何，单击该按钮会将滚动条移回div的顶部？

Answer 1

是。使用scrollTop

只需提供您的元素和值0：

$('#id').scrollTop(0);

您还可以将滚动动画设置为顶部，如下所示：

$('#id').animate({
   scrollTop: 0
}, 'slow');

Answer 2

你不需要jQuery（甚至是JavaScript）。

DEMO

定义锚名称：

<a name="top"></a>

在底部创建指向此锚点的链接：

<a href="#top">back to top</a>​

Answer 3

如果您正在处理y溢出和/或ScrollTop x溢出，请使用ScrollLeft。

$('#yourbuttonid').click(function() {
    $('#First').scrollTop(0);//for vertical scroll
    $('#First').scrollLeft(0);//for horizontal scroll
});

Answer 4

$('#scrollToTopButton').click(function(){
    $('#First').scrollTop(0);
});

Answer 5

OVERKILL !!! 对于这个问题使用scrollTop或jquery ...对于这样一个简单的任务可能是不可取的。请改用锚点：

<a name="pageTop"></a>
....
<a href="#pageTop">TOP</a>

或者你还想做更多的事情吗？