Question

当我点击导航链接时，它会在移动设备上滚动到页面顶部而不是正确的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/

的链接

需要帮助！

Answer 1

简单的解决方案我不得不将标签ID更改为其他名称。我有匹配的ID。

网站导航无法滚动以更正手机上的div

1 个答案: