En este video aprenderás a crear un botón de ir arriba con una buena animación con HTML, CSS y JavaScript
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="gotop.css">
<title>GoTop</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Proyectos</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
<div class="container">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A, labore. Tenetur quasi, laboriosam veritatis corrupti
illum dolorem, officia earum laborum enim debitis quam accusantium delectus magnam commodi expedita aut a! Iste
culpa facilis quis nulla, repudiandae, vel totam neque earum labore, quidem molestias cumque corporis explicabo
amet quasi placeat dolorum.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A, labore. Tenetur quasi, laboriosam veritatis corrupti
illum dolorem, officia earum laborum enim debitis quam accusantium delectus magnam commodi expedita aut a! Iste
culpa facilis quis nulla, repudiandae, vel totam neque earum labore, quidem molestias cumque corporis explicabo
amet quasi placeat dolorum.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A, labore. Tenetur quasi, laboriosam veritatis corrupti
illum dolorem, officia earum laborum enim debitis quam accusantium delectus magnam commodi expedita aut a! Iste
culpa facilis quis nulla, repudiandae, vel totam neque earum labore, quidem molestias cumque corporis explicabo
amet quasi placeat dolorum.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum minus quas omnis rem aspernatur distinctio
eaque iusto sequi consequatur laborum soluta repellat aut perferendis autem nihil placeat aliquid laudantium earum
hic necessitatibus doloremque, cumque dolores ipsa! Velit obcaecati error, fugit facilis vel totam est numquam
laboriosam, quae assumenda quasi ex, perferendis delectus doloribus exercitationem unde labore impedit quas rerum
nam fuga iste. Unde ea placeat quidem ipsa, totam nihil quam doloribus magnam atque voluptatum omnis neque
voluptatem error. Molestias odit iure quae dolore labore quia minima natus unde pariatur veritatis consequatur
itaque ea dolorum quo asperiores aperiam commodi, fugiat quisquam suscipit aliquid. Delectus laudantium ipsam sed.
Fugit corporis exercitationem harum amet, eveniet dicta? Id dolor odit aliquam quidem numquam similique,
temporibus vero natus sapiente sunt praesentium, adipisci corporis! Eaque enim modi voluptatum assumenda,
provident delectus. Asperiores fugit odio officia minima! Dolores repudiandae quis possimus ullam ab iste culpa
tempore officiis.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut tenetur aliquid, dolore ipsa sapiente fugit eum,
facere iste maxime odit, harum nisi excepturi? Unde illum consequuntur aliquid dignissimos numquam atque deleniti
quis harum blanditiis sint eligendi, fugiat nisi ea nemo quas quae praesentium repellat consequatur omnis, cum
molestiae. Tenetur minima, suscipit laudantium consectetur, quas accusamus vel sequi laboriosam recusandae cumque
at, sit dolores ipsam in. Accusamus maiores vero maxime labore quia praesentium, nesciunt reprehenderit
blanditiis, ut modi nulla beatae.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat dolorem molestiae facilis ratione nemo ipsam
natus beatae obcaecati ea corrupti, alias rem optio quia earum repudiandae aspernatur quis consequuntur animi
repellendus placeat dolorum eveniet a iure? Voluptatem, illum.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora fugit nisi velit est aliquam id architecto,
soluta ab, saepe quos unde quia incidunt. Dolorem, quisquam est! Amet pariatur nesciunt odio saepe ducimus
accusantium laudantium autem reiciendis enim iusto repudiandae aspernatur ipsum nihil, unde et ea deleniti
suscipit vitae temporibus asperiores blanditiis? Tempore, cum corporis expedita ipsum nemo molestiae modi facere a
consectetur numquam eaque. Laborum pariatur modi eaque. Temporibus magnam amet optio eos ratione ut blanditiis
sunt rem similique. Recusandae in, nihil corrupti illum, quo molestias nulla, est eius ab magni quaerat ducimus
autem voluptates sed voluptatibus laboriosam nesciunt?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A, labore. Tenetur quasi, laboriosam veritatis corrupti
illum dolorem, officia earum laborum enim debitis quam accusantium delectus magnam commodi expedita aut a! Iste
culpa facilis quis nulla, repudiandae, vel totam neque earum labore, quidem molestias cumque corporis explicabo
amet quasi placeat dolorum.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A, labore. Tenetur quasi, laboriosam veritatis corrupti
illum dolorem, officia earum laborum enim debitis quam accusantium delectus magnam commodi expedita aut a! Iste
culpa facilis quis nulla, repudiandae, vel totam neque earum labore, quidem molestias cumque corporis explicabo
amet quasi placeat dolorum.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum minus quas omnis rem aspernatur distinctio
eaque iusto sequi consequatur laborum soluta repellat aut perferendis autem nihil placeat aliquid laudantium earum
hic necessitatibus doloremque, cumque dolores ipsa! Velit obcaecati error, fugit facilis vel totam est numquam
laboriosam, quae assumenda quasi ex, perferendis delectus doloribus exercitationem unde labore impedit quas rerum
nam fuga iste. Unde ea placeat quidem ipsa, totam nihil quam doloribus magnam atque voluptatum omnis neque
voluptatem error. Molestias odit iure quae dolore labore quia minima natus unde pariatur veritatis consequatur
itaque ea dolorum quo asperiores aperiam commodi, fugiat quisquam suscipit aliquid. Delectus laudantium ipsam sed.
Fugit corporis exercitationem harum amet, eveniet dicta? Id dolor odit aliquam quidem numquam similique,
temporibus vero natus sapiente sunt praesentium, adipisci corporis! Eaque enim modi voluptatum assumenda,
provident delectus. Asperiores fugit odio officia minima! Dolores repudiandae quis possimus ullam ab iste culpa
tempore officiis.</p>
</div>
<div class="go-top-container">
<div class="go-top-button">
<i class="fas fa-chevron-up"></i>
</div>
</div>
<script src="gotop.js"></script>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
/* Barra de navegación */
header {
height: 6rem;
background: #333;
padding: 0 5rem;
}
ul li {
display: inline-block;
}
ul li a {
line-height: 6rem;
color: #fff;
text-decoration: none;
font-size: 2rem;
padding: 0 1rem;
}
.container {
max-width: 80rem;
margin: auto;
padding-top: 4rem;
}
.container p {
font-size: 2rem;
margin-bottom: 2rem;
}
/* GOTOP */
.go-top-container {
position: fixed;
bottom: 4rem;
right: 4rem;
width: 6.6rem;
height: 6.6rem;
z-index: -1;
}
.go-top-button {
width: 0rem;
height: 0rem;
background: #2071b2;
border-radius: 50%;
cursor: pointer;
transition: 0.2s;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
.go-top-button i {
position: absolute;
font-size: 1.7rem;
top: 48%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
color: #fff;
transition: 0.2s;
}
.show {
z-index: 10;
}
.show .go-top-button {
animation: popup 0.3s ease-in-out;
width: 6.6rem;
height: 6.6rem;
z-index: 11;
}
.show i {
transform: translate(-50%, -50%) scale(1);
}
@keyframes popup {
0% {
width: 0;
height: 0;
}
50% {
width: 8rem;
height: 8rem;
}
100% {
width: 6.6rem;
height: 6.6rem;
}
}
JavaScript
window.onscroll = function(){
console.log(document.documentElement.scrollTop);
if(document.documentElement.scrollTop > 100) {
document.querySelector('.go-top-container').classList.add('show');
}
else{
document.querySelector('.go-top-container').classList.remove('show');
}
}
document.querySelector('.go-top-container').addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
No te olvides de dejar tu comentario