Skip to content

Instantly share code, notes, and snippets.

@IgnaciodeNuevo
Last active July 19, 2019 16:59
Show Gist options
  • Save IgnaciodeNuevo/44b54bf62cde30fd5a8c323dcc82ef8b to your computer and use it in GitHub Desktop.
Save IgnaciodeNuevo/44b54bf62cde30fd5a8c323dcc82ef8b to your computer and use it in GitHub Desktop.
Scroll to top
<main class="main post" id="anchor" role="main">
Content...
</main>
<a id="topBtn" class="btn-fixed" href="#anchor">
Lleva a la parte superior de la página.
</a>
<script>
// When the user scrolls down 500px from the top of the document, show the button
window.addEventListener('scroll', function () {
if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
document.getElementById('topBtn').style.display = 'block';
} else {
document.getElementById('topBtn').style.display = 'none';
}
});
</script>
<style>
html {
/* This adds the smooth scroll */
scroll-behavior: smooth;
}
.btn-fixed {
background-color: #0045C2;
bottom: 1rem;
color: white;
display: none;
max-width: 10rem;
position: fixed;
right: 1rem;
text-align: center;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment