Javascript jQuery的水平滚动div问题_Javascript_Jquery_Html_Css_Horizontal Scrolling

Javascript jQuery的水平滚动div问题

javascript jquery html css

Javascript jQuery的水平滚动div问题,javascript,jquery,html,css,horizontal-scrolling,Javascript,Jquery,Html,Css,Horizontal Scrolling,我的页面当前看起来如下所示：当我点击作品时，它会完美地滚动到工作区。然而，当我试图在使用加载页面时直接访问工作部分时，似乎工作将自己替换为about，这意味着我无法返回about 这是我的CSS： <style type="text/css"> html, body, ul, ol, li, form, fieldset, legend{ margin: 0; padding: 0; } h1, h2, h3, h4, h

我的页面当前看起来如下所示：

当我点击作品时，它会完美地滚动到工作区。然而，当我试图在使用加载页面时直接访问工作部分时，似乎工作将自己替换为about，这意味着我无法返回about

这是我的CSS：

<style type="text/css">
    html, body, ul, ol, li, form, fieldset, legend{
        margin: 0;
        padding: 0;
    }

    h1, h2, h3, h4, h5, h6, p { margin: 0; }

    body{
        font-family: 'Vollkorn', serif, Arial;
        font-size: 15px;
        line-height: 1.5;
    }

    p{
        margin-bottom:15px;
    }

    a{
        color:#0073BF;
        text-decoration:none;
    }

    h2{
        text-align:center;
        font-size:32px;
        font-weight:400;
    }

    h4{
        text-align:center;
        font-size:18px;
        font-weight:400;
    }

    #wrap{
        width:600px;
        margin:0 auto;
    }

    #content{
        overflow:hidden;
        -moz-box-shadow: 0 0 2px 2px #ccc;
        -webkit-box-shadow: 0 0 2px 2px #ccc;
        box-shadow: 0 0 2px 2px #ccc;
    }

    .contentbox-wrapper{
        position:relative;
        left:0;
        width:3000px;
        height:100%;
    }

    .contentbox{
        width:580px;
        height:100%;
        float:left;
        padding:10px;
        background:#fff;
    }

    #nav {
        margin-top:10px;
        background: url("navbg.png") repeat-x center bottom;
        border-bottom: 1px solid #DDDDDD;
        padding: 5px 10px;
    }

    #nav ul li{
        display:inline;
        margin-right:10px;
    }

</style>

这是正文：

<body>
    <div id="wrap">
        <div id="content">
            <div class="contentbox-wrapper">
                <div id="about" class="contentbox">
                    <h3>About</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis ornare nibh, vel condimentum risus blandit ut. Sed vel tortor ac ligula blandit interdum eu vel leo. In semper, nunc sit amet tincidunt volutpat, nisl elit tempor eros, at rutrum nisl enim a lorem. Ut quis tellus felis. Maecenas rhoncus accumsan odio quis faucibus. Aliquam erat tortor, vehicula eget facilisis eget, commodo et sapien. Suspendisse potenti. Praesent convallis urna non est mollis ultrices. Fusce fringilla lacinia sapien non eleifend. Morbi venenatis nulla id libero tempus et volutpat sem facilisis. Duis eu lacus sapien. Aliquam a lorem justo. Cras nec mi quam, vitae fermentum urna. </p>
                </div>
                <div id="work" class="contentbox">
                    <h3>Work</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis ornare nibh, vel condimentum risus blandit ut. Sed vel tortor ac ligula blandit interdum eu vel leo. In semper, nunc sit amet tincidunt volutpat, nisl elit tempor eros, at rutrum nisl enim a lorem. Ut quis tellus felis. Maecenas rhoncus accumsan odio quis faucibus. Aliquam erat tortor, vehicula eget facilisis eget, commodo et sapien. Suspendisse potenti. Praesent convallis urna non est mollis ultrices. Fusce fringilla lacinia sapien non eleifend. Morbi venenatis nulla id libero tempus et volutpat sem facilisis. Duis eu lacus sapien. Aliquam a lorem justo. Cras nec mi quam, vitae fermentum urna. </p>
                </div>

                <div id="contact" class="contentbox">
                    <h3>Contact</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis ornare nibh, vel condimentum risus blandit ut. Sed vel tortor ac ligula blandit interdum eu vel leo. In semper, nunc sit amet tincidunt volutpat, nisl elit tempor eros, at rutrum nisl enim a lorem. Ut quis tellus felis. Maecenas rhoncus accumsan odio quis faucibus. Aliquam erat tortor, vehicula eget facilisis eget, commodo et sapien. Suspendisse potenti. Praesent convallis urna non est mollis ultrices. Fusce fringilla lacinia sapien non eleifend. Morbi venenatis nulla id libero tempus et volutpat sem facilisis. Duis eu lacus sapien. Aliquam a lorem justo. Cras nec mi quam, vitae fermentum urna. </p>
                </div>
            </div>
        </div>
        <div id="nav">
            <ul>
                <li ><a class="active" href="#about" onClick="goto('#about', this); return false">About</a></li>
                <li><a href="#work" onClick="goto('#work', this); return false">Work</a></li>
                <li><a href="#contact" onClick="goto('#contact', this); return false">Contact</a></li>
            </ul>
        </div>
    </div>
</body>

这就是我的JavaScript的样子：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
    function goto(id, t){
        //animate to the div id.
        $(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 600);
    }

请给我们看看你的代码。@BenM很抱歉，代码被添加了。你能试试吗？函数gotoid，t{//animate to the div id.$.contentbox wrapper.animate{left:-$t.position.left}，600；}我猜，这可能不正确。它会使它滚动并停止到错误的位置：