jQuery 水平滚动的问题

Question

这是我的css

        <style type="text/css" media="screen">

        body {

            margin: 0;
        }

        #wrap1{         
            width:600px;
            margin:0 auto;
                        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;   
        }

        #body1{

            width: 8000px;
        }

        .panel {
            width: 600px;
            float: left;
            left:0px;
            top:0px;
            margin-top: 45px;
            background: #eee;

        }

        #banner {
            position: fixed;
        }

        #banner ul {
            line-height: 45px;
            margin: 0 30px;
            padding: 0;
        }

        #banner ul li {
            display: inline;
            margin-right: 30px;
        }

        </style>

这就是我身体里的东西

    <div id="wrap1">
    <div id="body1">
    <div id="banner">
                <ul>
                    <li>
                        <a href="#home">Home</a>
                    </li>  
                    <li>   
                        <a href="#newsletter">Newsletter</a>
                    </li>  
                    <li>   
                        <a href="#directions">Directions &amp; Opening Hours</a>
                    </li>  
                    <li>   
                        <a href="#contact">Contact us</a>
                    </li>
                </ul>
            </div>
            <div id="home" class="panel">
                <h2>
                    Home
                </h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
            <div id="newsletter" class="panel">
                <h2>
                    Newsletter
                </h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
            <div id="directions" class="panel">
                <h2>
                    Directions
                </h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
            <div id="contact" class="panel">
                <h2>
                    Contact
                </h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>


    </div>
    </div>

这是javascript

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
               $("#banner a").bind("click",function(event){
                   event.preventDefault();
                   var target = $($(this).attr("href"));
                   $("html, #wrap1").stop().animate({
                       scrollLeft: $(target).offset().left,
                       scrollTop: $(target).offset().top
                   }, 1200);
               });
            });
        </script>

我想要这样的东西。 因此，当我单击导航联系人时，wrap1 内的页面将平滑滚动到锚点 #contact 所在的位置

但是，我现在得到的是平滑滚动工作正常，但是，它似乎并没有停在应该停止的地方。 例如，当我单击 Newsletter 链接时，滚动将停止在 Newsletter 的一半部分。 因此，当单击 Newsletter 链接时，它会向我显示 Newsletter 的一半和方向的一半。

请 jQuery 大师帮我解决这个问题。 这已经困扰我好几天了。

感谢并抱歉我缺乏 jQuery 知识。

*编辑：这是我的页面现在的样子。 请帮忙http://testhscroll.tumblr.com/

Answer 1

您的问题是 offset() 返回相对于文档的值，而 scrollLeft 将相对于父级。

您需要根据父级（div#banner 或 UL）的位置进行调整。