Como hacer un botón de "Ir Arriba" utilizando HTML, CSS y JavaScript
Actualmente cuando entras a un sitio web y realizas un scroll (bajar la pantalla), notas que aparece un botón y al pulsarlo, te regresa a la parte superior del sitio.En este post aprenderás a como realizarlo y así lo puedas utilizar en tu sitio web o blog, para realizarlo utilizaremos HTML, CSS y JavaScript, realizar este botón no es tan difícil como lo parece, es muy sencillo y no utiliza mucho código.
Puedes utilizar algunos de los editores de HTML ya mencionados en otras publicaciones, como lo son:
Aquí dejo todo lo necesario para realizar lo antes mencionado, si es de tu agrado no olvides compartirlo.
Estructura en HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Boton de Ir Arriba</title>
<link rel="stylesheet" href="EstilosCSS/Subir.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="Js_query/Subir.js"></script>
</head>
<body>
<h1 style="text-align: center;">Boton de Ir Arriba</h1>
<div class="contenido" style="margin: 30px; font-size: 20px;">
<span>Baja la pantalla haciendo scroll y presiona en "Ir Arriba"</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio eius aspernatur illo ipsum dignissimos, omnis asperiores in officia. Fuga magnam explicabo quae iusto, nihil fugit. Magni eos beatae labore aut.</p>
<p>Nisi officiis, quas recusandae ipsam deleniti sit magni, iste suscipit eaque nam quaerat esse sapiente accusantium nulla cum quos aperiam molestiae aspernatur voluptatem veniam quia quidem. Voluptas, culpa facere dicta.</p>
<p>Assumenda repudiandae autem illum in sunt! Nulla at ducimus deserunt quae quos aperiam quisquam enim temporibus, magni, necessitatibus voluptate itaque architecto perferendis sapiente, laudantium obcaecati accusantium. Quisquam excepturi reprehenderit quia.</p>
<p>Harum esse, illo magnam, possimus illum voluptate repellendus magni, aliquid voluptatibus eos odit eius obcaecati ducimus. Ipsa nemo, dignissimos beatae quam suscipit vel tempora similique doloremque veritatis expedita aperiam architecto?</p>
<p>Rem quo minima temporibus esse eum illum tempora magnam voluptatem nihil quod. Cum quod laborum quisquam, beatae architecto maxime expedita alias! Deserunt, at voluptatem esse temporibus nam, et ipsum doloribus!</p>
<p>A deleniti praesentium voluptatem tempora ratione natus vitae eaque minima totam rerum qui optio corporis obcaecati et, quaerat aliquam ipsam nobis. Minima praesentium quasi nobis esse nihil porro similique, facilis.</p>
<p>Nihil ab nemo a ratione quas perferendis maxime enim, sequi voluptates labore aut dicta est, possimus laboriosam excepturi. Nulla, totam quasi quibusdam cumque eum temporibus magni non quidem iste dicta?</p>
<p>Quod, consequatur! Magni praesentium ea nemo eligendi, saepe. Tempore quos iusto odio aliquid eum repudiandae quas facere quibusdam, quo laboriosam molestias ea ipsa fugiat assumenda animi molestiae illo ut maiores.</p>
<p>Beatae, illo impedit itaque perspiciatis possimus sit sapiente suscipit mollitia ea ullam iure vel doloremque minima, nihil non molestias rerum illum error harum quas labore aut qui. Deleniti, numquam, fugiat!</p>
<p>Consequuntur voluptatibus dolor corporis quibusdam aut excepturi. Repudiandae adipisci ut quos rerum! Mollitia quae unde quasi at fugiat quibusdam voluptatibus dolores facilis, esse ipsam commodi magnam quam tempora minima, magni.</p>
</div>
<!--Codigo del boton subir-->
<div class="subir">Ir Arriba</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Boton de Ir Arriba</title>
<link rel="stylesheet" href="EstilosCSS/Subir.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="Js_query/Subir.js"></script>
</head>
<body>
<h1 style="text-align: center;">Boton de Ir Arriba</h1>
<div class="contenido" style="margin: 30px; font-size: 20px;">
<span>Baja la pantalla haciendo scroll y presiona en "Ir Arriba"</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio eius aspernatur illo ipsum dignissimos, omnis asperiores in officia. Fuga magnam explicabo quae iusto, nihil fugit. Magni eos beatae labore aut.</p>
<p>Nisi officiis, quas recusandae ipsam deleniti sit magni, iste suscipit eaque nam quaerat esse sapiente accusantium nulla cum quos aperiam molestiae aspernatur voluptatem veniam quia quidem. Voluptas, culpa facere dicta.</p>
<p>Assumenda repudiandae autem illum in sunt! Nulla at ducimus deserunt quae quos aperiam quisquam enim temporibus, magni, necessitatibus voluptate itaque architecto perferendis sapiente, laudantium obcaecati accusantium. Quisquam excepturi reprehenderit quia.</p>
<p>Harum esse, illo magnam, possimus illum voluptate repellendus magni, aliquid voluptatibus eos odit eius obcaecati ducimus. Ipsa nemo, dignissimos beatae quam suscipit vel tempora similique doloremque veritatis expedita aperiam architecto?</p>
<p>Rem quo minima temporibus esse eum illum tempora magnam voluptatem nihil quod. Cum quod laborum quisquam, beatae architecto maxime expedita alias! Deserunt, at voluptatem esse temporibus nam, et ipsum doloribus!</p>
<p>A deleniti praesentium voluptatem tempora ratione natus vitae eaque minima totam rerum qui optio corporis obcaecati et, quaerat aliquam ipsam nobis. Minima praesentium quasi nobis esse nihil porro similique, facilis.</p>
<p>Nihil ab nemo a ratione quas perferendis maxime enim, sequi voluptates labore aut dicta est, possimus laboriosam excepturi. Nulla, totam quasi quibusdam cumque eum temporibus magni non quidem iste dicta?</p>
<p>Quod, consequatur! Magni praesentium ea nemo eligendi, saepe. Tempore quos iusto odio aliquid eum repudiandae quas facere quibusdam, quo laboriosam molestias ea ipsa fugiat assumenda animi molestiae illo ut maiores.</p>
<p>Beatae, illo impedit itaque perspiciatis possimus sit sapiente suscipit mollitia ea ullam iure vel doloremque minima, nihil non molestias rerum illum error harum quas labore aut qui. Deleniti, numquam, fugiat!</p>
<p>Consequuntur voluptatibus dolor corporis quibusdam aut excepturi. Repudiandae adipisci ut quos rerum! Mollitia quae unde quasi at fugiat quibusdam voluptatibus dolores facilis, esse ipsam commodi magnam quam tempora minima, magni.</p>
</div>
<!--Codigo del boton subir-->
<div class="subir">Ir Arriba</div>
</body>
</html>
Estilos CSS
.subir {
display: none;
background-color: #3B5998;
color: #FFF;
text-align: center;
font-size: 20px;
font-weight: bold;
top: auto;
left: auto;
right: 30px;
bottom: 30px;
position: fixed;
padding: 10px;
cursor: pointer;
z-index: 300;
}
.subir:hover {
background-color: #B31217;
}
display: none;
background-color: #3B5998;
color: #FFF;
text-align: center;
font-size: 20px;
font-weight: bold;
top: auto;
left: auto;
right: 30px;
bottom: 30px;
position: fixed;
padding: 10px;
cursor: pointer;
z-index: 300;
}
.subir:hover {
background-color: #B31217;
}
Código en JavaScript
$(document).ready(function(){
$(window).scroll(function() {
$(this).scrollTop() ? $(".subir").fadeIn() : $(".subir").fadeOut()
}), $(".subir").click(function() {
$("html,body").animate({
scrollTop: 0
}, 1000)
});
});
$(window).scroll(function() {
$(this).scrollTop() ? $(".subir").fadeIn() : $(".subir").fadeOut()
}), $(".subir").click(function() {
$("html,body").animate({
scrollTop: 0
}, 1000)
});
});
Y así es como se vería en nuestro sitio o pagina web.
