I'm doing a web page with bootstrap, it turns out that I entered a contact form, in its respective "section", until then everything is fine, but reloading the page starts from section id="contact" and not from the beginning of the page, this is the code:
<section id="contact" class="contact section has-pattern">
<div class="container">
<div class="contact-inner">
<h2 class="title text-center">Contacto</h2>
<div class="author-message">
<div class="profile">
<img class="img-fluid" src="assets/images/profile.png" alt="" />
</div><!--//profile-->
<div class="speech-bubble">
<h3 class="sub-title">contacto</h3>
<form role="form" id="Formulario" action="contacto2.php" method="POST">
<div class="form-group">
<label class="control-label" for="Nombre">Nombres</label>
<input type="text" class="form-control" id="Nombre" name="Nombre" placeholder="Introduzca su nombre" required autofocus />
</div>
<div class="form-group">
<label class="control-label" for="Motivo">Motivo de Contacto</label>
<select name="Motivo" class="form-control">
<option value="opcion1">opcion1</option>
<option value="opcion"2>opcion2</option>
<option value="opcion3">opcion3</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="Empresa">Empresa</label>
<input type="text" class="form-control" id="Empresa" name="Empresa" placeholder="Introduzca el nombre de su empresa" required />
</div>
<div class="form-group">
<label class="control-label" for="Correo">Dirección de Correo Electrónico</label>
<input type="email" class="form-control" id="Correo" name="Correo" placeholder="Introduzca su correo electrónico" required />
</div>
<div class="form-group">
<label class="control-label" for="Mensaje">Mensaje</label>
<textarea rows="5" cols="30" class="form-control" id="Mensaje" name="Mensaje" placeholder="Introduzca su mensaje" required ></textarea>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Enviar">
<input type="reset" class="btn btn-default" value="Limpiar">
</div>
<div id="respuesta" style="display: none;"></div>
</form>
<div class="source">
<span class="name"><a href="" target="_blank">pagina</a></span>
<br />
<span class="title">web</span>
</div><!--//source-->
</div><!--//speech-bubble-->
</div><!--//author-message-->
<!--//info-->
</div><!--//contact-inner-->
</div><!--//container-->
</section><!--//contact-->
What will be so wrong for me to do this? thanks.