(47 intermediate revisions by 2 users not shown) | |||
Line 3: | Line 3: | ||
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> | <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<script> | <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> | </script> | ||
− | + | ||
<style type="text/css" rel="stylesheet"> | <style type="text/css" rel="stylesheet"> | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
Line 101: | Line 80: | ||
color: #38a541; | color: #38a541; | ||
text-decoration:underline; | text-decoration:underline; | ||
+ | } | ||
+ | |||
+ | #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: #afafaf; /* 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 */ | ||
} | } | ||
Line 129: | Line 127: | ||
<a href="https://2017.igem.org/Main_Page" target="_blank">IGEM 2017</a></br> | <a href="https://2017.igem.org/Main_Page" target="_blank">IGEM 2017</a></br> | ||
<a href="http://nymu-e.web.ym.edu.tw/bin/home.php" target="_blank">National Yang-Ming University</a></br> | <a href="http://nymu-e.web.ym.edu.tw/bin/home.php" target="_blank">National Yang-Ming University</a></br> | ||
+ | <a href="https://2017.igem.org/Team:NYMU-Taipei/Attributions" >Special Thanks</a> | ||
</p> | </p> | ||
Line 135: | Line 134: | ||
</div> | </div> | ||
− | + | <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> | |
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 16:46, 26 October 2017