Difference between revisions of "Team:TUDelft/Header"
Weronika77 (Talk | contribs) |
Weronika77 (Talk | contribs) |
||
| Line 161: | Line 161: | ||
background-size: 50%; | background-size: 50%; | ||
| + | } | ||
| + | |||
| + | #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 */ | ||
| + | font-size: 18px; /* Increase font size */ | ||
| + | } | ||
| + | |||
| + | #myBtn:hover { | ||
| + | background-color: #555; /* Add a dark-grey background on hover */ | ||
} | } | ||
</style> | </style> | ||
| Line 267: | Line 287: | ||
| + | |||
| + | <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> | ||
| − | + | <script>// When the user scrolls down 20px from the top of the document, show the button | |
| − | <script> | + | |
| − | + | ||
window.onscroll = function() {scrollFunction()}; | window.onscroll = function() {scrollFunction()}; | ||
| Line 281: | Line 301: | ||
} | } | ||
| − | + | // When the user clicks on the button, scroll to the top of the document | |
function topFunction() { | function topFunction() { | ||
document.body.scrollTop = 0; // For Safari | document.body.scrollTop = 0; // For Safari | ||
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera | document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera | ||
}</script> | }</script> | ||
| + | |||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 13:24, 21 June 2019
