Difference between revisions of "Template:Purdue"

Line 360: Line 360:
 
</body>
 
</body>
  
 +
/********************************* SCROLL TO TOP BUTTON ********************************/
  
 +
<body>
 +
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
 +
</body>
  
 +
<style>
 +
#myBtn {
 +
    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: red; /* Set a background color */
 +
    color: white; /* Text color */
 +
    cursor: pointer; /* Add a mouse pointer on hover */
 +
    padding: 15px; /* Some padding */
 +
    border-radius: 10px; /* Rounded corners */
 +
}
 +
 +
#myBtn:hover {
 +
    background-color: #555; /* Add a dark-grey background on hover */
 +
}
 +
</style>
 +
 +
<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("myBtn").style.display = "block";
 +
    } else {
 +
        document.getElementById("myBtn").style.display = "none";
 +
    }
 +
}
 +
 +
// When the user clicks on the button, scroll to the top of the document
 +
function topFunction() {
 +
    document.body.scrollTop = 0; // For Chrome, Safari and Opera
 +
    document.documentElement.scrollTop = 0; // For IE and Firefox
 +
}
 +
</script>
  
  
 
<!-- start of content -->
 
<!-- start of content -->
 
<div class="igem_2017_content_wrapper">
 
<div class="igem_2017_content_wrapper">

Revision as of 15:25, 31 October 2017

/********************************* SCROLL TO TOP BUTTON ********************************/