Paulo Dos Santos Paulo Dos Santos - 18 days ago 6
CSS Question

Problems with ID anchors

I'm trying to use reload a page to go to an anchor, but the page don't reload or scroll to the anchor. The anchor is not shown till the link is hit.



$('.link').click(function() {
$('#box').css('display', 'block');
});

#box {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
<h1>Title</h1>
<p>Description of the content.</p>
</div>
<a href="#box" class="link">Go to #Box</a>





This is the page in my blog:
http://simulatorio.blogspot.com.br/p/politicas.html#cookies


For exemple:


  1. I open
    http://simulatorio.blogspot.com.br/p/politicas.html
    in a small window (width of 500px, the content is shown).

  2. I click in Menu (the content is hidden, the menu is shown).

  3. I click in a link
    http://simulatorio.blogspot.com.br/p/politicas.html#cookies
    .

  4. The page does nothing (it doesn't reload)!!!



What I want is to go to the page
http://simulatorio.blogspot.com.br/p/politicas.html#cookies
on itself.

PS.: It only works when the link is opened in a new window/tab.

It should be opened in a small screen because the problem is happening there (responsive page). Thanks!

Answer

If the anchor is display:none, it may as well not exist for the purpose of navigation. Try this styling instead:

#box {
  width:0;
  height:0;
  overflow:hidden;
}

Or:

#box {
  visibility:hidden;
}