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所在的位置

但是，我现在得到的是平滑滚动效果很好，但是，它似乎并没有停止在应该停止的位置。例如，当我单击“新闻通讯”链接时，滚动将停止在“新闻通讯”的一半。因此，当单击“新闻通讯”链接时，它将向我显示新闻通讯的一半和“方向”的一半。

请jQuery专家帮助我解决此问题。这已经困扰了我好几天了。

感谢和抱歉，我缺乏jQuery知识。

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

这是我的CSS ] >>

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

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

Answer 1

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

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