Два вопроса по работе ссылки </a>

[aqua.77]

<a href="#q1" id="q2">132</a>
<div id="q1">
<h1>Заголовок</h1>
<p>Элемент</p>
<a href="#x">Закрыть</a>
</div>

div{
	width:500px;
	height:400px;
	background:gray;
	position:fixed;
	top:90px;
	left:30%;
	display:none;
}
div:target{
	display:block;
}
body{height:10000px;}

https://jsfiddle.net/a9zeppqq/

Вопрос собственно такой: Почему если присвоить href="#" то, таблица закрывается и браузер возвращается на начало страницы, а если указать href="#x" то блок просто пропадает. И можно ли запретить скролинг страницы когда открыт блок?.

Edited November 25, 2016 by aqua.77

[by chris]

21 час назад, aqua.77 сказал:

Почему если присвоить href="#" то, таблица закрывается и браузер возвращается на начало страницы

Таково действие по умолчанию.

[radioactive]

http://htmlbook.ru/css/target

Цитата

Для перехода к выбранному фрагменту документа, в адресе пишется символ # и указывается имя идентификатора. К примеру, в адресе http://www.w3.org/TR/css3-selectors/#target-pseudo происходит переход к элементу, атрибут id которого задан как target-pseudo. Такая запись адреса называется «целевой элемент». Псевдокласс :target применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.

Видимо по умолчанию # это начало документа, вам выше уже сказали

https://jsfiddle.net/ggrxwfkj/

вот вариант где при закрытии блока идет перемещение к кнопки открытия
насчет запрета скроллинга, можно сделать белый либо полупрозрачный фон для скрытия сайта под окном

можно и заморочиться, через тег body сделать overflow:hidden, что уберет скролл, то тогда больше 1 такого окна не сделать

вот еще варианты если интересно
http://codepen.io/search/pens?q=css+modal&limit=all&type=type-pens

Edited November 26, 2016 by radioactive