0

DIV 内に水平スクロール アンカーを作成しようとしています。全身タグをアニメーション化するだけでうまくいくようですが、DIVではうまくいかないようです。

ジャバスクリプトはこちら

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>      

    <script type="text/javascript">
            jQuery(document).ready(function($) {

                $(".scroll").click(function(event){     
                    event.preventDefault();
                    $('#wrapper').animate({scrollLeft:$(this.hash).offset().left}, 500);
                });
            });
    </script>

そしてHtmlをここに

<body>
    <div id="wrapper">
    <div id="wrappercontent">
    <div id="section1" class="section">

        <img src="images/big_head.png" />

    </div>
    <div id="section2" class="section">
        <img src="images/whatis.png" />

    </div>
    <div id="section3" class="section">
        <h2>Section 3</h2>
        <p>
            blahblahblabh

        </p>

    </div>
    </div>
 <div id="nav">
            <li><a href="#section1" class="scroll">1</a></li>
            <li><a href="#section2" class="scroll">2</a></li>
            <li><a href="#section3" class="scroll">3</a></li>
        </div>

        </div>
</body>

スタイルシートはこちら

    *{
    margin:0;
    padding:0;
}
body{
    background:#f0efe4;
    letter-spacing:-1px;
     font-family:Georgia;
    font-size: 34px;
    font-style: italic;
    width:12000px;
}
#wrapper{
    width:1000px;
    height:700px;

    overflow:scroll;
}
#wrappercontent{
    height:auto;
    width:12000px;

}

#nav{
    z-index:1;
    position:fixed;
}
.section{
    margin:0px;
    bottom:0px;
    width:4000px;
    float:left;
    height:100%;
    text-shadow:1px 1px 2px #f0f0f0;
}

その振る舞いは奇妙です。助けてください

4

1 に答える 1

2

計算で現在のスクロール位置を考慮する必要があるだけです。

scrollLeft: $('#wrapper').scrollLeft() + $(this.hash).offset().left

デモ: http://jsfiddle.net/brianpeiris/h6hvq/

于 2012-12-24T04:06:50.273 に答える