1

当我单击导航链接时，它会将我滚动到移动设备页面的顶部，而不是正确的 id 部分。我不确定为什么会这样。

这是代码：

$(function () {
    $('a[href^="#"]').click(function (event) {
        var id = $(this).attr("href");
        var offset = 110;
        var target = $(id).offset().top - offset;

        $('html, body').animate({
            scrollTop: target
        }, 500);
        event.preventDefault();
    });
});

<div id="nav-ph">
    <div class="nav-btn-ph"></div>
    <ul class="main-nav-ph">
        <li><a href="#the-advantage">THE ADVANTAGE</a>

        </li>
        <li><a href="#services">OUR SERVICES</a>

        </li>
        <li><a href="#team">OUR TEAM</a>

        </li>
        <li><a href="#news">MAKING NEWS</a>

        </li>
        <li><a href="#contact">CONTACT</a>

        </li>
    </ul>
</div>
<div id="the-advantage">
    <p>Advantage</p>
    <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="services">
    <p>Services</p>
    <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="team">
    <p>Team</p>
    <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="news">
    <p>News</p>
    <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">
    <p>Contact</p>
    <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>

她是 jsfiddle 的链接http://jsfiddle.net/BrentRansom/BEMr9/1/

需要帮助！

4

1 回答 1

0

简单的解决方案我不得不将标签 ID 更改为不同的名称。我有匹配的身份证。

于 2013-10-14T16:52:52.810 回答