Вот, например...
<section id="home">
<h1>Hello world!</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo odio assumenda error magnam ratione, reiciendis temporibus rerum repudiandae sed, possimus beatae! Rem, fuga! Quae perferendis nam cumque, eaque architecto quam!</p>
<a href="#articles">Articles</a> • <a href="#about">About</a>
</section>
<section id="articles">
<h1>Articles</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores tempore maxime porro? Earum atque quo est exercitationem fuga quae in saepe. Molestias qui nisi dolorem, accusantium soluta quod temporibus explicabo!</p>
<a href="#home">Home</a> • <a href="#about">About</a>
</section>
<section id="about">
<h1>About</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste adipisci optio consequuntur recusandae doloribus maiores sapiente, necessitatibus ducimus veniam modi voluptatem nihil atque tempore molestiae a natus sunt quos ab!</p>
<a href="#home">Home</a> • <a href="#articles">Articles</a>
</section>
<style>
html, body, section {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
section {
padding: 5em;
overflow: auto;
transition: 500ms;
}
section:nth-of-type(1) {
background-color: yellowgreen;
}
section:nth-of-type(2) {
background-color: gold;
}
section:nth-of-type(3) {
background-color: deeppink;
}
section:target, section:target a {
background-color: black;
color: white;
}
h1 {
transition: 500ms;
}
:target h1 {
text-shadow:
0 0 4px white,
0 -5px 4px #FFFF33,
2px -10px 6px #FFDD33,
-2px -15px 11px #FF8800,
2px -25px 18px #FF2200;
font-size: 400%;
}
</style>
Что вы имеете в виду, когда пишете, что перейти по ссылке, но не перемещаться браузеру на этот id? Ведь переход по ссылке как раз таки подразумевает переход (или перемещение), поэтому :target срабатывает, а если перехода нет, то и :target не сработает!
