In page (hash) link, get to the first visible element

Question

I have a partial view (handlebars html template) that has a piece for html for desktop and one piece of mobile. I just hide it accordingly using different css classes.

<div class='hideOnMobile showOnDesktop'>
  <a name='manuals' href='#'>Manuals</a>
  <!-- Extra html for Desktop presentations -->
</div>
<div class='hideOnDesktop showOnMobile'>
  <a name='manuals' href='#'>Manuals</a>
  <!-- Extra html for Mobile presentations -->
</div>

The important pieces of my css is basically hiding and showing the elements using media queries:

@media only screen and (min-width: 420px) {
   .showOnMobile { display: block; }
   .hideOnMobile { display: none; }
}
@media only screen and (min-width: 1050px) {
   .showOnDesktop { display: block; }
   .hideOnDesktop { display: none; }
}

CSS is attached for reference. The css is actually working as expected. The problem is the following:

When the browser receives the url for that specific page http://example.org/page.html#manuals , I would like the document to navigate directly to the first visible <a> element. No matter what, I cannot make the deep link to work with the first visible element. I've read that there is some kind of limitations, but I wanted to know if there is a work around, or if the only option that I have is to emulate the deep link using javascript (that I'm trying to avoid). Thanks a lot

Answer 1

Maybe the markup can be altered?

<a name='manuals' id="manuals" href='#manuals'>Manuals</a>
<div class='hideOnMobile showOnDesktop'>
  <!-- Extra html for Desktop presentations -->
</div>
<div class='hideOnDesktop showOnMobile'>
  <!-- Extra html for Mobile presentations -->
</div>

This way, the target of the hash (#manuals) is always visible regardless of the environment. This also makes it a bit more maintainable since you have less duplication.