Javascript 多次滚动容器div

我有一个页面，我想滚动容器中的数据，如下所示：

我创建了相邻的文本列，可以使用多个div滚动。 现在。。。在每个div中，我想创建一个按钮，将容器滚动到下一个div或上一个div。上面的jsfiddle示例的问题是，它只滚动到第一个和最后一个200px。有没有一种方法可以用偏移量来做我需要做的事情

我的尝试在这里，但我也会将其粘贴到下面

谢谢你的帮助

CSS:

HTML:

把你的内容放在这里。。。
左边
正确的
在这里放置另一个内容。。。


左边
正确的

Javascript:

<script type="text/javascript">
   $(document).ready(function(){
$("#right").click(function(){
    $("#contents").animate({left:'-200px'},500);
    $("#container").animate({'margin-left':'200px'},500);
});
$("#left").click(function(){
    $("#contents").animate({left:'0px'},500);
     $("#container").animate({'margin-left':'0px'},500);
});
});
</script>

$（文档）.ready（函数（）{
$（“#右”）。单击（函数（）{
$（“#内容”）.animate（{left:'-200px'}，500）；
$（“#容器”）.animate（{'margin-left'：'200px'}，500）；
});
$（“#左”）。单击（函数（）{
$（“#内容”）.animate（{左：'0px'}，500）；
$（“#容器”）.animate（{'margin-left'：'0px'}，500）；
});
});

好的，请耐心听我说，这里有许多问题需要解决，所以我将详细介绍一下

CSS 要获得与问题中提到的模型小提琴相同的效果，

#容器

的宽度必须等于您的列<代码>#内容的宽度必须等于

#容器

的宽度乘以列数（本例中为三列）

.col

将替换原始代码中的内联CSS

#目录{
宽度：600px；
高度：200px；
位置：绝对位置；
}
#容器{
高度：500px；
溢出：隐藏；
位置：相对位置；
边框：1px#000实心；
}
#容器，.col{
宽度：200px；
}
上校{
浮动：左；
}

HTML 任何给定的

id

只能使用一次，因此我已将

按钮上的
右
和
左
元素更改为
.right
和
.left
。我还添加了第三个专栏，因为您的问题是专门询问如何将此通用技术应用于两个以上的专栏


把你的内容放在这里

左边
正确的
在这里放置另一个内容

左边
正确的
在这里放置另一个内容

左边
正确的

JavaScript
要使
.animate（）
jQuery方法按您想要的方式工作，必须使用相对属性值（有关详细信息，请参阅）。为了防止
#容器
从列中滑出，我创建了一个简单的函数，
getOffset（）
，并对照
#内容
的边界进行检查

您还应该将尽可能少的值硬编码到JS中，而不是从DOM中读取它们，就像我在这里使用的
colwidth
和
contwidth
一样

var colwidth=$（'#container'）.width（），
contwidth=$（“#内容”）.width（），
getOffset=函数（）{
返回parseInt（$（'#container'）.css（'margin-left'）；
};
$（“.left”）。单击（函数（）{
如果（getOffset（）==0）返回false；
$（“#内容”）.animate（{left:'+='+colwidth}，500）；
$（“#容器”）.animate（{'margin-left'：'-='+colwidth}，500）；
});
$（“.right”）。单击（函数（）{
if（getOffset（）==contwidth-colwidth）返回false；
$（“#内容”）.animate（{left:'-='+colwidth}，500）；
$（“#容器”）.animate（{'margin-left'：'+='+colwidth}，500）；
});

如果您继续努力，可能会有一个更优雅的解决方案，但这应该会让您朝着正确的方向前进。
this.is.good。谢谢你详细解释了一切。我几乎是一个初学者，这是我尝试做的第一个“大”项目。我感谢你的帮助：D
<!--Column 1--> 
<div style='float:left; width:150px'>
Put your content here...
<button id="left">Left</button>
<button id="right">right</button>
</div><!--end div colomn 1-->


 <!--Column 2-->    
 <div style='float:left; width:150px; margin-left:300px'>
Put another content here...
<br>
<button id="left">Left</button>
<button id="right">right</button>

</div><!--End div column2-->



 </div><!--End div "contents"-->

<script type="text/javascript">
   $(document).ready(function(){
$("#right").click(function(){
    $("#contents").animate({left:'-200px'},500);
    $("#container").animate({'margin-left':'200px'},500);
});
$("#left").click(function(){
    $("#contents").animate({left:'0px'},500);
     $("#container").animate({'margin-left':'0px'},500);
});
});
</script>