0

这是我的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 和一半的 Directions。

请那里的 jQuery 大师帮我解决这个问题。这几天一直困扰着我。

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

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

4

1 回答 1

0

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

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

于 2013-09-14T14:34:06.730 回答