一个页面网站在导航到不同部分时没有响应

Question

我正在创建一个响应式单页组合，其中包含“关于”，“技能”，“工作”和“联系”部分我只使用HTML和CSS从头开始编码。要单击导航栏上的链接导航到每个部分，我使用了以下代码行：

<div class="about">
    <a href="index.html#about">About</a>
</div>
<div class="skills">
    <a href="index.html#skills">Interests</a>
</div>
<div class="work">
    <a href="index.html#work">Work</a>
</div>
<div class="contact">
    <a href="index.html#contact">Contact</a>
</div> 

当我在650px以下调整窗口大小时，我无法正确导航到各个部分。例如，当我点击“关于”时，页面会转到“关于”的底部，依此类推。如何在不使用Bootstrap或任何jQuery的情况下纠正这个问题？问题的屏幕截图如下：

点击“关于”时页面的屏幕截图：

点击工作时页面的屏幕截图：

PS： 我还尝试增加650px断点下方的填充顶部和填充底部以获得结果（在单击时正确显示部分）。但是这样做会有很多空白空间。

Answer 1

你好用这个JQuery代码

$(".nav").on("click","a", function (event) {
    event.preventDefault();

    var id  = $(this).attr('href'),

        top = $(id).offset().top;     

    $('body,html').animate({scrollTop: top}, 1500);
});

在导航面板中

<a href="#about">About</a>

和节或div id

<section id="about">....content of this section... </section>