<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {padding:20px}
html { scroll-behavior: smooth;
}
.arrowDown, .arrowUp { position: relative;
display:block;
width:26px;
height:26px;
border-radius: 5px;
background-color: rgb(65, 65, 65);
}
.arrowDown::before { content:"";
position: absolute;
top:7px;
left:5px;
border-left:8px solid transparent;
border-right:8px solid transparent;
border-top:14px solid white;
}
.arrowUp::before { content:"";
position: absolute;
top:7px;
left:5px;
border-left:8px solid transparent;
border-right:8px solid transparent;
border-bottom:14px solid white;
}
p {width: 100px;} </style>
</head>
<body id="inicio">
<a href="#fin"><span class="arrowDown"></span></a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor ligula nec velit pellentesque vestibulum. Suspendisse sed risus nec lectus tincidunt gravida. Integer a lacus ultrices, facilisis est vitae, dignissim arcu. Nam porttitor enim eu velit iaculis accumsan. Praesent in neque non justo imperdiet sagittis in nec justo. Integer est velit, convallis sit amet ante eu, posuere sagittis lectus. Fusce eu vulputate est. Pellentesque sollicitudin eros ac libero sodales, nec eleifend lorem tempus. Phasellus et fringilla sem, nec molestie risus. Curabitur et blandit enim. Donec eget lacinia libero. Proin non ornare justo. Fusce posuere est nec massa pharetra, a iaculis risus lobortis. Sed facilisis facilisis egestas.</p>
<p>Mauris vel mauris malesuada, rhoncus libero laoreet, blandit sem. Vestibulum in nulla lacinia, sagittis felis sit amet, cursus quam. Suspendisse in bibendum magna. Maecenas laoreet sed augue nec aliquet. Suspendisse et maximus nisi. Aliquam lacinia nisi ac metus tristique, a tempor purus imperdiet. Donec vitae nunc rutrum sem eleifend tempor. In nec nunc eget ligula rutrum vehicula sit amet id massa. Curabitur sed turpis tellus. Nulla egestas sapien vel lacus interdum, ut pellentesque elit fringilla. Phasellus finibus posuere ligula. Morbi aliquet ex urna. Etiam et massa faucibus, sagittis sem id, lacinia neque.</p>
<p>In turpis odio, consectetur sed commodo cursus, sollicitudin eu enim. In sollicitudin eget lectus at consequat. Sed ut leo nisi. Mauris vel lacus pharetra, vulputate magna non, consectetur elit. Donec ipsum felis, mattis in imperdiet in, maximus in magna. Donec blandit pretium nisl et placerat. Integer luctus, tellus eget cursus euismod, libero purus auctor est, ac iaculis est nulla a velit. Aenean faucibus non tortor sit amet congue. Fusce porta nibh justo, malesuada cursus leo finibus eu. Duis ullamcorper nisl non augue blandit, at ullamcorper dolor interdum. Proin quis erat blandit, faucibus velit nec, feugiat nisi. Fusce nibh leo, consequat et magna eu, tincidunt congue turpis. Ut sit amet massa ex. Praesent vitae hendrerit eros. Duis justo ante, eleifend et leo ut, pellentesque congue massa.</p>
<p>Aenean ipsum nisl, dictum ac facilisis non, luctus sit amet sapien. Donec nibh elit, eleifend ut posuere vitae, feugiat consectetur erat. Duis euismod rhoncus bibendum. In hac habitasse platea dictumst. Suspendisse cursus porttitor faucibus. Quisque elit neque, congue malesuada nulla at, maximus eleifend metus. Mauris tincidunt odio et purus luctus varius. Praesent quis mattis turpis, eu rutrum orci. Phasellus in mauris lobortis, auctor massa vel, dictum erat. Phasellus nec orci congue, lacinia orci id, fringilla elit. Proin dignissim mattis varius.</p>
<p>Fusce lectus nunc, vehicula a laoreet a, ullamcorper in nunc. Pellentesque quis facilisis nibh. Suspendisse dignissim, lacus eu faucibus pulvinar, lacus dolor sodales augue, ut iaculis est erat eu ipsum. Ut gravida vehicula enim porttitor porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec dictum nisi laoreet urna dictum porta. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam consectetur sollicitudin enim in aliquet. Curabitur pellentesque quam nisi.</p>
<a href="#inicio"><span class='arrowUp'></span></a>
<span id="fin"></span>
</body>
</html>
Crear cuenta
Comentarios sobre la versión: 1 (0)
No hay comentarios