0

Estoy creando una página web donde tengo el siguiente codigo para crear un botón:

<a href="" target="_blank">Contacto</a>

Me gustaría que el botón llevara a una parte posterior de la página ¿Cómo puedo hacerlo?

Si conocen una forma más sencilla de crear un botón y me la dicen también estaré muy agradecido.

Gracias.

3 respuestas 3

0

Es sencillo:

coloca tu a tu div un id

<div id="panel">
    Hola
</div>

y en el a colocas

<a href="#panel" >Contacto</a>

y te enviará a esa parte de la página.

2
  • Me funcionó, gracias el 6 dic. 2021 a las 16:41
  • Recuerda que si deseas enviarlo a una url sin dar click en nigún boton solo colcas el # en la url por ejemplo url.com#panel y de una te enviara alli el 6 dic. 2021 a las 16:51
0

Podrías usar un anclaje, debes poner un id al elemento donde quieres que se posicione, ejemplo el header, y en el href pones #iddelelemento Ej: Ir a Titulo

1
  • Perfecto, gracias el 6 dic. 2021 a las 16:41
0

Te dejo una alternativa con efecto de desplazamiento suave usando CSS.

Para crear un efecto suave solo tendrías que añadir scroll-behavior: smooth; al elemento HTML, esto te permite un desplazamiento suave de toda la página.

html {
   scroll-behavior: smooth;
}

Nota: también es posible agregarlo a un elemento / contenedor de desplazamiento específico.

Para dirigirte a un contenido en específico simplemente le pases el valor del atributo id al enlace, algo como <a href="#contacto">Contacto</a> y la caja del contenido seria <section id='contacto'></section>

Posible ejemplo:

html {
  scroll-behavior: smooth;
}
a {
 color: white;
}
a:hover {
 color: #CCCCCC;
}
#red,
#blue {
  background-color:red;
  display: block;
  position: relative;
  min-height: 250px;
  padding:50px;
  margin-bottom:50px;
}
#blue {
  background-color:blue;
}
<div id="red">
  <h1>Inicio</h1>
  <a href="#blue">Contacto</a>
</div>

<div id='blue'>
  <h1>Contacto</h1>
  <a href="#red">Inicio</a>
</div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.