Показать сообщение отдельно
  #2 (permalink)  
Старый 30.07.2019, 14:31
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Вот, например...
<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 не сработает!

Последний раз редактировалось Malleys, 30.07.2019 в 14:53.
Ответить с цитированием