一页网站导航到不同部分时没有响应 [英] One page website not responsive while navigating to different sections

问题描述

我正在创建一个包含关于"，技能"，工作"和联系方式"部分的自适应单页投资组合.我仅使用HTML和CSS从头开始编码.要通过单击导航栏上的链接向上导航至每个部分，我使用了以下代码行:

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> 

当我将窗口大小调整为650px以下时，我无法正确导航到各个部分.例如，当我单击关于"时，页面转到关于"的底部，依此类推. 我如何在不使用Bootstrap或任何jQuery的情况下纠正此问题? 问题的屏幕截图如下:

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:
我还尝试将padding-top和padding-bottom增加到650px断点以下，以实现结果(单击时正确显示各部分).但是这样做时，有很多空白空间.

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.

推荐答案

您好使用此JQuery代码

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);
});

在导航面板中

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

以及版块或div ID

and section or div id

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

这篇关于一页网站导航到不同部分时没有响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！