Как отменить прокрутку страницы наверх при клике по пустой ссылке?

Question

[Crash]

Есть несколько табов, которые представляют собой радио-кнопки с метками для переключения блоков:

<input type="radio" name="cc-tabs" id="cc_tab_1" checked>
<label for="cc_tab_1">Все каналы</label>
<input type="radio" name="cc-tabs" id="cc_tab_2">
<label for="cc_tab_2">Познавательные</label>
<input type="radio" name="cc-tabs" id="cc_tab_3">
<label for="cc_tab_3">Фильмовые</label>

input[type="radio"] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

Как сделать так, чтобы по клику на них страница не прокручивалась наверх, скролл оставался на том же уровне?

UPD: Вопрос поправлен, вместо ссылок использую радио-кнопки - сделал так, чтобы все было на чистом СSS

Comments

[Дмитрий]

onclick="return false;"

[Crash]

проблему решил, правда другим способом - задвинул радио-кнопки под метки, вместо смещения за пределы области видимости

Answer 1

[Nikolay Talanov]

Это напрямую связано с тем, что ваши радио кнопки имеют такие стили:

input[type="radio"] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

При клике на них, браузер пытается перевести окно к их положению.
Задайте им примерно такие стили:

.hidden-radio {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: -9999;
}

Опасити спрячет кнопку визуально, отрицательный z-index сделает их некликабельными/неактивными для hover'а.

Comments

[Crash]

да, практически так я и сделал в итоге)

Answer 2

[Денис Инешин]

Несколько вариантов

1. Уберите #
2. В CSS для ссылок pointer-events: none;, но это опять же временное решение.
3. На JavaScript придется добавить обработчик для всех ссылок и вставить для каждой event.preventDefault(); что явно уже перебор.

Comments

[Crash]

поправил, вместо ссылок - радиокнопки

[Дмитрий Шинкарь]

Уберите # - отличный совет! =))

Answer 3

[GreatRash]

Раз у вас табы, значит вообще не имеет смысла их делать ссылками. В HTML для таких целей существует замечательный элемент button или вообще span.

Всё равно же они скриптом обрабатываются ведь так?

Comments

[Crash]

поправил, вместо ссылок - радиокнопки

Answer 4

[Сергей]

вместо ссылок используйте span с сss cursor:pointer;

Comments

[Crash]

поправил, вместо ссылок - радиокнопки

Answer 5

[didrux]

Не знаю, почему ещё никто не предложил этого варианта. Не встречал не на англоязычных ресурсах, ни тут.
Javascript код при нажатии на кнопку:

const pageOffset = pageYOffset;
        window.scrollTo({
            top: pageOffset
        });