Giving focus after a href

Question

I want to know if there is a way to give the focus to an input after a local href

Like here's what I have :

<a href="#bottom"> Sign up </a>
And at the bottom of the page :
<div id="bottom">
<input type="email" name="email" id="email" placeholder="email address">
</div>

What I want is when someone clics on the Sign Up it goes directly to the bottom page and gives focus to the input so the user can directly type his email address whitout having to clic.

Thanks !

Answer 1

Use a label styled like an a. Make sure the label's for attribute matches the input's id attribute. This will focus the input when the label is clicked and scroll the page so the input is in view.

.input-link {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

.input-link:hover,
.input-link:focus {
  color: red;
}

p {
  height: 100vh;
}

<label class="input-link" for="email">Sign up</label>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae dolorum atque, eaque, modi ducimus commodi iure officia reprehenderit eius quasi eligendi natus aliquam dolore recusandae nobis. Perferendis inventore ea quisquam.</p>
<div id="bottom">
<input type="email" name="email" id="email" placeholder="email address">
</div>

Answer 2

This should do the trick:

Updated HTML: Added an id to the link

<a id="signUpLink" href="#bottom"> Sign up </a>
And at the bottom of the page :
<div id="bottom">
<input type="email" name="email" id="email" placeholder="email address">
</div>

jQuery/JavaScript

$(document).ready(function(){
  var $link = $("#signUpLink");
  var $emailInput = $("#email");

  $link.on("click", function(){
      $emailInput.focus();
  });
});

and here is the fiddle: https://jsfiddle.net/yfs6nxmb/1/