Cómo enlazar botones en una web a una sección específica

colombiano3454 · 7 May 2017

Hola he estado creando una web, pero le he colocado "botones", LO QUE BUSCO ES QUE AL HACERLE CLIC AL BOTÓN lleve a una "altura" específica de la web.

Supongamos que la web o portada tenga de altura 1000 px, QUISIERA QUE AL HACER CLIC en el botón te lleve a la ALTURA 673 px (porque allí estará un párrafo explicando otro tema).

Gracias, parceritos y bendiciones.

Stron · 7 May 2017

No creo que sea una buena idea estar calculando la altura para poder llegar a una sección de la web, lo mejor que puedes hacer es darle un id a cada párrafo o a los titulos/subtitulos y a los botones poner como enlace la id del párrafo como este ejemplo.

HTML:

<a href="#parrafo"></a>

<p id="parrafo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et nisl et ex auctor vestibulum nec luctus mi. Pellentesque ultricies, nisl sed aliquam hendrerit, risus erat ullamcorper neque, eget laoreet nulla sem in nisl. Maecenas faucibus ut risus eu rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tristique nec ipsum sit amet maximus. Vestibulum tempus nibh placerat orci ultricies, at blandit nunc volutpat. Nulla ultricies sollicitudin ipsum, at tincidunt dolor efficitur in. Suspendisse potenti. In sit amet nunc massa. Vivamus sed mauris ultrices, auctor tellus in, condimentum sem. Nam tincidunt libero sed sem euismod dictum. Donec dapibus magna orci, et dictum ipsum semper sit amet. Sed finibus volutpat ipsum, in lacinia augue semper a.</p>

ZoroRoronoa · 8 May 2017

Ya te dieron la respuesta y re bien funciona.

Ahora y quieres que sea animado la forma en que el scroll sube o baja hasta dicha seccion, puedes combinarla con jQuery
Busca sobre: animate scrollTop

mariangelad17 · 11 Jun 2017

lo que debes dividir es el código en secciones con la etiqueta <sección></sección> y descargas la librería de jquery si no la tienes descargada.
<script>
jQuery(document).ready(function(){
****$('h2').append('<a href="#top" class="gototop">Subir</a>');
****linkInterno = $('a[href^="#"]');
****linkInterno.on('click',function(e) {
****e.preventDefault();
****var href = $(this).attr('href');
****$('html, body').animate({ scrollTop : $( href ).offset().top }, 'slow');
****});
});
</script>aquí parte de un código que te puede ayudar

Cómo enlazar botones en una web a una sección específica

colombiano3454

Stron

ZoroRoronoa

mariangelad17

Temas similares