Javascript scrollLeft（）的替代项

再见

我有一个具有水平滚动功能的页面。
我有一个侧栏和一个内容框

在侧栏中我有5个链接，比如LINK1-LINK5

在内容框中，我有3500px的宽度，其中包含5个分区，每个分区700px。
因此，页面最初加载到第一个700px分区。因此，如果我单击链接3，它将平滑地滚动到第三个分区。

但是，我想加载第二部分中的页面。
我可以使用scrollLeft（）完成此操作

$（“div.content1”）。向左滚动（700）



但是水平滚动将被弄乱。第二个div将充当第一个div，这意味着当我单击LINK1时，它不会被回滚

帮忙

*我认为需要这个代码

<script>
    function goto(id, t){   
        //animate to the div id
        $(".contentbox-wrapper").stop().animate({"left": -($(id).position().left)}, 1200);  
    }
</script>


函数goto（id，t）{
//为div id设置动画
$（“.contentbox wrapper”）.stop（）.animate（{“left”：-（$（id.position（）.left）}，1200）；
}

这是HTML代码的示例

<div id="sidebar1">
<span class="upper">Foods</span><br />
<a href="#" onClick="goto('#rice', this); return false"><span class="lower">Rice, Noodles & Pasta</span></a><br />
<a href="#" onClick="goto('#snacks', this); return false"><span class="lower">Snacks & Tidbits</span></a><br />
<a href="#" onClick="goto('#canned', this); return false"><span class="lower">Canned & Ready to Eat</span></a><br />
<a href="#" onClick="goto('#breakfast', this); return false"><span class="lower">Breakfast Cereal</span></a><br />
<br />


食物












这是我的内容框的示例

<div class="content1">

<div class="contentbox-wrapper">
    <div id="rice" class="contentbox" align="center">
        <h2>
            Rice, Noodles & Pasta
        </h2>

        <section id="product">
                <ul class="clear">
                    <li data-id="1">
                        <div href="#">
                            <a href="images/products/f1/_DSC4640.jpg" class="zoom"><img src="images/products/f1/_DSC4640.jpg" width="200" height="200" /></a>
                            <h3>Maggi Curry Flavour</h3>
                            <p>(5 + 1) x 79 G</p>
                            <h2>Price:$2.40</h2>
                        </div>
                    </li>


米饭、面条和意大利面


马吉咖喱味
（5+1）x 79克

价格:$2.40

我根据您的标记创建了一个示例。我希望这就是你要找的。我还对你的JavaScript做了一些小改动。请参见下面的解释

HTML

<nav>
    <a>Item 1</a>
    <a>Item 2</a>
</nav>

<div class="contentbox-wrapper">
    <div>
        <h2>Item 1</h2>
    </div>
    <div>
        <h2>Item 2</h2>
    </div>
</div>

JavaScript

var container = $('div.contentbox-wrapper');
var boxes = container.children();

$('nav > a').click(function() {
    container.stop().animate({
        scrollLeft: boxes.eq($(this).index()).get(0).offsetLeft
    }, 350);
});

尝试在变量中存储多次使用的选择器。优点是，您不需要再次重新查询它们。此JavaScript不做任何其他操作，然后使用
.index（）
和
.eq（）
获取与单击链接对应的框的偏移量。然后在
.animate（）
-函数中使用该值滚动到此位置

演示


一些注释


如果你在“米饭、面条和意大利面”等正常内容中有一个符号，你必须像这样避开它：
&

不要使用
align=“center”
。它是。为此，请使用CSS
请同时添加您的HTML。制作一把小提琴来展示你的问题可能会有帮助。谢谢你的回复。我刚刚添加了HTML代码。
-元素是如何定位的？它们会漂浮吗？还是内联块？还是他们的位置绝对正确？@InsertUserName再次感谢您的回复<代码>

设置为相对位置类型。但是，将滚动的是

.contentbox包装

，而不是

部分

。

.contentbox包装器

也被定位为

相对的

。我不知道发生了什么，但不知怎的，代码在我的Dreamweaver上不起作用。我有绝对的复制和粘贴一切。这是绝对正确的工作在中国Fiddle@EdwardOctavianusPakpahan您是否将JavaScript部分包装在

$（document.ready）中（function（）{/*东西放在这里*/}）？嘎！我忘了添加http:，我只是复制并粘贴了谷歌api网站上的url，就像一个numpty。不管怎样，谢谢你，这很有效。
var container = $('div.contentbox-wrapper');
var boxes = container.children();

$('nav > a').click(function() {
    container.stop().animate({
        scrollLeft: boxes.eq($(this).index()).get(0).offsetLeft
    }, 350);
});