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

Question

[blackfish2]

Есть меню с якорной ссылкой до секции, и две секции, одна для пк, другая для моб.устройств. Если и на ту, и на другую повесить одинаковые айдишники для ссылок, якорь не работаает. Как можно это реализовать, учитывая, что несколько айди не задаются?

Comments

[EverOne]

Убирать одну из секций с помощью js из DOM в зависимости от UserAgent не вариант?

[Stalker_RED]

EverOne: да хотя-бы скрывать при помощи css.

[EverOne]

Stalker_RED: при помощи css? display: none или visible: hidden? - оба эти варианта не уберут блок из DOMa, следовательно, "двойной якорь" не заработает.

[Stalker_RED]

EverOne: Двойной якорь - невалидная выдумка, неработающая by design.
Попробуйте менять ширину:
https://jsfiddle.net/ew6wxgrf/

[EverOne]

Stalker_RED: Двойной якорь - я имел ввиду как один якорь к двум разным блокам.
Аргумент засчитан, но тогда я в принципе не понимаю в чем проблема у ТСа? Да и дублирование контента на одной странице - не огонь так-то...

Answer 1

[Stalker_RED]

Без скриптов никак. id должен быть уникальным в пределах документа.

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

https://www.w3schools.com/tags/att_global_id.asp

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

UPD: Собрал пример, попробуйте менять ширину: https://jsfiddle.net/ew6wxgrf/

Answer 2

[Вадим Белкин]

Сделайте секциям разные id, а в меню в нужном пункте вместо одной ссылке сделайте две (каждая на свою секцию) и в зависимости от устройства скрывайте либо ссылку на мобильную секцию, либо ссылку на ПК секцию через медиа выражения. Т.е. визуально у вас будет один якорный пункт в меню (т.к. второй будет скрыт), но фактически два одинаковых, но с разными якорями.

Если у вас секции показываются либо одна либо другая в зависимости от экрана и они в верстке рядом, то можно их обернуть в общий блок с id на который будет ссылаться ваша ссылка в меню

Comments

[EverOne]

Тоже решение, но убрать из DOM с помощью jQ/js сами блоки будет проще, хотя с точки зрения SEO прятать ссылки правильнее...