One page website not responsive while navigating to different sections

问题

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">
    <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>

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.

回答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

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

and section or div id

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

来源：https://stackoverflow.com/questions/52089887/one-page-website-not-responsive-while-navigating-to-different-sections

标签

html

css

responsive