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

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> 

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

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

点击“工作”时页面的屏幕截图:

附言:
我还尝试将 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>