1

En estos días e estado haciendo un pequeño proyecto y ya hice un botón de ir arriba ahora me pregunto como hacer uno de ir hacia abajo y quisiera saber como hacerlo con html, javascript para luego darle estilo con css y colocarle un icono con FontAwesome

1

2 respuestas 2

1

Tan facil como decir <a href="#footer">ir abajo</a> donde en href indicara a donde se quiere ir. Para ser mas claro mira este ejemplo

$(document).ready(function() {
  $('a[href^="#"]').click(function() {
    var destino = $(this.hash); //this.hash lee el atributo href de este
    $('html, body').animate({ scrollTop: destino.offset().top }, 700); //Llega a su destino con el tiempo deseado
    return false;
  });
});
div{
  background-color: #ddd;
  height: 2000px;
}
footer{
  background-color: #333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  tu contenido
  <a href="#footer">ir abajo</a>
</div>
<footer id="footer">
   la parte de abajo
</footer>

El script solo le agrega la animacion al scroll

1
  • Buen aporte +1, aunque podrías explicar cómo funciona el código jQuery en sí, que hace por ejemplo $(this.hash), etc. Ayudaría a entender mejor el ejemplo para usuarios que no tienen conocimiento en jQuery.
    – D.Bulten
    Commented el 22 may. 2018 a las 16:40
1

Lo mas sencillo es que te crees unos elementos (por ejemplo un hr) con id's justo despues de abrir y cerrar el body y añadas enlaces a esos id's con #

Al clickar en esos enlaces, la pagina hará scroll hasta mostrarlos en pantalla lo más arriba posible.

main {
  background: yellow;
  height: 1000px;
}

header {
  background: green;
  height: 70px;
}

footer {
  background: blue;
  height: 70px;
}

hr.hidden {
  visibility: hidden;
  height: 0;
  margin: 0;
}

.scrollNavigation {
  position: fixed;
  left: 20px;
  background: black;
  padding: 10px;
  color: white;
}

a.scrollNavigation[href="#top"] {
  top: 20px;
}

a.scrollNavigation[href="#bottom"] {
  bottom: 20px;
}
<body>

  <hr id="top" class="hidden" />

  <header></header>
  <main></main>
  <footer></footer>

  <hr id="bottom" class="hidden" />

  <a class="scrollNavigation" href="#top">↑ Go Top</a>
  <a class="scrollNavigation" href="#bottom">↓ Go Bottom</a>
</body>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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