Я новичок в HTML/CSS/SCSS, но пытаюсь создать одну страницу, которая выглядит так, как будто она меняет страницы, но на самом деле просто использует display: none и display: block.
Я получил это с помощью следующего кода:
// Hide all sections by default
section {
display: none;
}
// Initially display nav, hero, footer, portfolio, contact sections
#nav-section,
#hero-section,
#footer-section,
#portfolio-section,
#contact-section {
display: block;
}
// Show about, coding, or scs sections when targeted
#about-section:target,
#coding-section:target,
#scs-section:target {
display: block;
}
// Hide portfolio and contact when about, coding, or scs are targeted
#about-section:target ~ #portfolio-section,
#about-section:target ~ #contact-section,
#coding-section:target ~ #portfolio-section,
#coding-section:target ~ #contact-section,
#scs-section:target ~ #portfolio-section,
#scs-section:target ~ #contact-section {
display: none;
}
// Show portfolio and contact when either is targeted
#portfolio-section:target,
#contact-section:target,
#portfolio-section:target ~ #contact-section,
#contact-section:target ~ #portfolio-section {
display: block;
}
// Ensure other sections are hidden when portfolio or contact is targeted
#portfolio-section:target ~ #about-section,
#portfolio-section:target ~ #coding-section,
#portfolio-section:target ~ #scs-section,
#contact-section:target ~ #about-section,
#contact-section:target ~ #coding-section,
#contact-section:target ~ #scs-section {
display: none;
}
<p><a href = "#about-section">About Me</a></p>
<p><a href = "#portfolio-section">My Portfolio</a></p>
<p><a href = "#coding-section">Coding Examples</a></p>
<p><a href = "#scs-section">SCS Scheme</a></p>
<p><a href = "#contact-section">Contact Me</a></p>
Все работает нормально, но, очевидно, клик по-прежнему переходит в эту часть страницы. Обратите внимание, у меня есть большое изображение героя.
Можно ли как-нибудь решить эту проблему без JavaScript? Я пытаюсь понять, возможно ли это только в HTML/CSS/SCSS.
Я попытался изменить навигационные ссылки на несвязанные идентификаторы, например с #coding-section на #coding, и обновить SCSS с:
#coding-section:target \~ #portfolio-section,
к
#coding:target \~ #portfolio-section,
но это не сработало для меня.
🤔 А знаете ли вы, что...
JavaScript поддерживает работу с куки и хранилищем веб-браузера для сохранения данных на клиентской стороне.
Вы можете сделать это с помощью JavaScript, как описано в этом вопросе: Запретить прокрутку браузера до элемента, когда в URL-адресе присутствует хэш, но сохранить его в URL-адресе.
Чтобы сделать это без JavaScript, вы можете сместить целевую позицию прокрутки элемента, используя scroll-margin (в частности scroll-margin-top). Вы можете установить это значение, чтобы браузер прокручивал страницу до верха. Чтобы выбрать значение, вы можете либо использовать JS для расчета высоты всего содержимого над разделами, либо установить фиксированное значение, которое больше, чем когда-либо было бы это содержимое (например, 500vh).
Это по-прежнему вызовет прокрутку, но теперь браузер будет прокручиваться до верхней части страницы. В зависимости от вашего макета и потребностей установка другого значения для scroll-margin может работать лучше.
section {
scroll-margin-top: 100vh;
}<h1>My Website</h1>
<div>
<a href = "#one">One</a>
<a href = "#two">Two</a>
<a href = "#three">Three</a>
</div>
<section id = "one">
One
</section>
<section id = "two">
Two
</section>
<section id = "three">
Three
</section>
<div style = "height: 200vh;"></div>