Question

我正在尝试在DIV内部进行水平滚动锚定。如果我只是为整个身体标签制作动画但似乎不适合我的DIV，似乎可以工作。

继承人javascript

        <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;
}

它表现得很奇怪。请帮忙

Answer 1

您只需在计算中考虑当前的滚动位置：

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

演示： http://jsfiddle.net/brianpeiris/h6hvq/

在DIV中水平滚动动画表现得很奇怪

1 个答案: