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知识。

* EDITED：这是我的页面现在看起来像。请帮忙 http://testhscroll.tumblr.com/

Answer 1

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

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

jQuery水平滚动的问题

1 个答案: