Одностраничный сайт не реагирует на переходы в разные разделы - PullRequest
Новая
       6

Одностраничный сайт не реагирует на переходы в разные разделы

0 голосов
/ 30 августа 2018

Я создаю адаптивный одностраничный портфель с разделами «О себе», «Навыки», «Работа» и «Контакты». Я пишу код с нуля, используя только 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? Ниже приведены скриншоты проблемы:

Снимок экрана страницы при нажатии на О:

Снимок экрана страницы при нажатии на Работа:

PS:
Я также попытался увеличить верхнюю и нижнюю границу под точкой останова 650 пикселей, чтобы добиться результата (чтобы при нажатии кликать правильно отображались разделы). Но при этом много пустого места.

1 Ответ

0 голосов
/ 30 августа 2018

привет, используйте этот код 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 

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