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
-
Bienvenido a Stack Overflow en español, te sugiero revisar la sección de como preguntar, para que tu preguntas sean bien recibidas por la comunidad y obtengas respuestas de calidad. También puedes revisar como crear un ejemplo mínimo, completo y verificable.– user22721Commented el 22 may. 2018 a las 1:50
Añade un comentario
|
2 respuestas
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
-
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 enjQuery
.– D.BultenCommented el 22 may. 2018 a las 16:40
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>