Question

天儿真好！

我有一个页面，其中有水平滚动功能我有一个侧栏和一个内容箱

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

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

但是，我想在第二个div中加载页面。
我能够使用scrollLeft（）来做到这一点

<script>$("div.content1").scrollLeft(700);</script>

但水平滚动会搞砸。第二个div将作为第一个div，这意味着当我单击LINK1时，它将不会向后滚动。

帮助？

*我认为需要此代码

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

这是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>

Answer 1

我基于你的标记创建了一个示例。我希望，它是，你在寻找什么。我还对你的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部分中所需的所有ID。

<强> CSS

div.contentbox-wrapper {
    position: relative;
    width: 400px;
    height: 200px;
    overflow: hidden;
    overflow-x: scroll;
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
}

div.contentbox-wrapper > div {
    display: inline-block;
    width: 400px;
    height: 200px;
    text-align: center;
}

div.contentbox-wrapper > div:last-child {
    margin-right: 0;
}

<强>的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() - 函数中使用该值滚动到此位置。

<强>演示

Try before buy

一些注释

如果您的正常内容中有＆符号，例如“ Rice，Noodles＆amp; Pasta ”，则必须将其转义为：&。
请勿使用align="center"。它是deprecated since HTML4。使用CSS实现此目的。

scrollLeft（）的替代方案

1 个答案: