Javascript 单击锚点时滚动div 30px

使用溢出滚动div的最佳方式是什么：单击定位点时按一定像素或一定百分比自动滚动div？HTML非常简单：

<style>
#container{
height:250px;
overflow:auto;
</style>

<div id="container">
<p>Lots of Content</p>
</div>

<a href="#" id="scrolldiv">Scroll Down</a>

#容器{
高度：250px；
溢出：自动；
很多内容

当我点击上面的锚点时，我想在一定数量的像素上滚动div，比如说30px。我希望jQuery有一些内置的东西可以让这变得简单

$('#scrolldiv').click(function(e){
    var current = $('#container').scrollTop();
    $('#container').scrollTop(current + 30);
    e.preventDefault();
});​

---

为此，我将使用：

我相信它的语法最短，看起来也很不错

---

为此，我将使用：

我相信它的语法最短，看起来也很不错

---

您还可以使用overflow:hidden（或overflow-y:hidden，overflow-x:auto），这样在#container div.上就没有滚动条，而更喜欢$（#scrolldiv”）.live（'click'，function（）{…}）；或$（#scrolldiv”）.on（'click'，function（）{…}）；[1.7.x]，因为它更好。@Panagiotis

.live（）

肯定不是“更好”.A）它被解除权限B）它执行完全不同的任务。

.live（）

通过绑定到

文档而不是元素本身来委托事件，这几乎总是一个坏主意（）：“避免在大型文档上过度使用document或document.body来委托事件。”)谢谢，这确实有效，但我将使用上面的jquery示例，因为它更简单，并且有更好的卷轴。@Sineta true。我没有意识到这一点，因为我使用的是最新版本之前的一个版本。感谢您指出这一点。您也可以使用overflow:hidden（或overflow-y:hidden，overflow-x:auto）因此，#container div.上没有滚动条，而更喜欢$（“#scrolldiv”）.live（'click'，function（）{…}）；或者$（“#scrolldiv”）.on（'click'，function（）{…}）；[1.7.x]，因为它更好。@Panagiotis
.live（）
肯定不是“更好”。A）它是不受欢迎的B）它做的是完全不同的工作。
.live（）
通过绑定到
文档而不是元素本身来委托事件，这几乎总是一个坏主意（）：“避免在大型文档上过度使用document或document.body来委托事件。”)谢谢，这确实有效，但我将使用上面的jquery示例，因为它更简单，并且有更好的卷轴。@Sineta true。我没有意识到这一点，因为我使用的是最新版本之前的一个版本。感谢您指出这一点。谢谢，我同意这是最干净的，看起来也是最漂亮的！您肯定仍然希望将事件传递给您ur回调和调用preventDefault（）正如下面的答案所示。谢谢@hackNightly，我会确保包括这一点。#scrolldiv不一定是一个锚。我没有添加它是为了简单起见。它是按原样工作的。谢谢，我同意这是最干净的，看起来也是最好的！你肯定会希望将事件传递到回调中并调用preventDefault（）如下面的答案所示。谢谢@hackNightly，我会确保包括这一点。#scrolldiv不一定是一个锚。我添加它不是为了简单。它正在按原样工作。
$('#scrolldiv').click(function(){
    $('#container').animate({scrollTop: '+=30'});
});