One page website not responsive while navigating to different sections - html

Question

I am creating a responsive one page portfolio that has About, Skills, Work and Contact sections. I am coding from scratch using HTML and CSS alone. To navigate to each section up on clicking the links on the navbar, I have used the following lines of code:
<div class="about">
About
</div>
<div class="skills">
Interests
</div>
<div class="work">
Work
</div>
<div class="contact">
Contact
</div>
When I resize the window below 650px, I am unable to navigate to the individual sections correctly. Like for instance when I click on About, the page goes to the bottom of About and so on.
How do I rectify this without using Bootstrap or any jQuery?
The screen shots of the problem are attached below:
Screen shot of the page while clicking on About:
Screen shot of the page while clicking on Work:
PS:
I also tried increasing the padding-top and padding-bottom below the 650px break point to achieve the result (to display the sections correctly up on clicking). But on doing so, there is a lot of empty space.

Answer 1

hello use this JQuery code
$(".nav").on("click","a", function (event) {
event.preventDefault();
var id = $(this).attr('href'),
top = $(id).offset().top;
$('body,html').animate({scrollTop: top}, 1500);
});
in navigation panel
About
and section or div id
<section id="about">....content of this section... </section>