43 lines
1.4 KiB
HTML
43 lines
1.4 KiB
HTML
<style>
|
|
#scrolltop {
|
|
display: none; /* Hidden by default */
|
|
position: fixed; /* Fixed/sticky position */
|
|
bottom: 20px; /* Place the button at the bottom of the page */
|
|
right: 30px; /* Place the button 30px from the right */
|
|
z-index: 99; /* Make sure it does not overlap */
|
|
border: none; /* Remove borders */
|
|
outline: none; /* Remove outline */
|
|
background-color: {{ site.color }}; /* Set a background color */
|
|
color: white; /* Text color */
|
|
cursor: pointer; /* Add a mouse pointer on hover */
|
|
padding: 10px 15px; /* Some padding */
|
|
border-radius: 100px; /* Rounded corners */
|
|
font-size: 18px; /* Increase font size */
|
|
font-weight: 600;
|
|
}
|
|
|
|
#scrolltop:hover {
|
|
background-color: #555; /* Add a dark-grey background on hover */
|
|
}
|
|
</style>
|
|
<button onclick="topFunction()" id="scrolltop" title="Go to top">🔝</button>
|
|
|
|
<script>
|
|
// When the user scrolls down 20px from the top of the document, show the button
|
|
window.onscroll = function() {scrollFunction()};
|
|
|
|
function scrollFunction() {
|
|
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
|
|
document.getElementById("scrolltop").style.display = "block";
|
|
} else {
|
|
document.getElementById("scrolltop").style.display = "none";
|
|
}
|
|
}
|
|
|
|
// When the user clicks on the button, scroll to the top of the document
|
|
function topFunction() {
|
|
document.body.scrollTop = 0; // For Safari
|
|
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
|
|
}
|
|
</script>
|