Internal navigation with Jquery

Question

I have the following structure in my header:

<header>
...

<div id="header-reserva" class="cf">
   <a href="#header-reserva-iframe" class="scroll">Reserve aqui!</a>
</div>

...

<iframe id="header-reserva-iframe" src="http://www.meuiframe.com"></iframe>

</header>

The iframe is with display None, because I just want it to appear when the link is clicked. For this I made a code in Jquery:

$("#header-reserva a").click(function() 
{
    $("#header-reserva-iframe").css('display', 'inherit');
});

The iframe is shown when the link is clicked, but the link is not directed to the iframe in the first click, and a second click is required for this, that is, I need the link in the first click to show the iframe and navigate to the top of it. How can I do that?

Answer 1

You can use this to animate the scroll to the iframe

$('html, body').animate({
    scrollTop: $("#header-reserva-iframe").offset().top
}, 2000);

Answer 2

The link points to the outside frame (window). To point to the iframe, use a target:

<a href="#" target="header-reserva-iframe" class="scroll">Reserve aqui!</a>

To the target work, I believe you need a name in iframe:

<iframe id="header-reserva-iframe" name="header-reserva-iframe" src="http://www.meuiframe.com"></iframe>

Answer 3

Try to force the page to go to div like this:

$("#header-reserva a").click(function() 
{
    $("#header-reserva-iframe").css('display', 'inherit');
    window.location.hash = '#header-reserva-iframe';
});

Answer 4

Remember that jQuery code should run only after the page has finished loading the DOM, which is the element tree of the document. With this you don’t need to force the browser to scroll to the element.

$(function(){ // Aguarda o DOM ser carregado
    $("#header-reserva a").click(function() {
        $("#header-reserva-iframe").show(); // Troquei o .css() por .show() só pra ficar mais legível
    });
});