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

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：
我还尝试将padding-top和padding-bottom增加到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>