|
|
| Line 17: |
Line 17: |
| | | | |
| | | | |
| − |
| + | |
| | | | |
| | /* om MediaWiki style weg te halen*/ | | /* om MediaWiki style weg te halen*/ |
| Line 152: |
Line 152: |
| | | | |
| | | | |
| − | #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: #00A6D6; /* Set a background color */
| |
| − | color: black; /* 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 176: |
Line 158: |
| | <body> | | <body> |
| | | | |
| − | <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
| |
| | | | |
| | | | |
| Line 276: |
Line 257: |
| | | | |
| | | | |
| − |
| |
| − | <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 Safari
| |
| − | document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
| |
| − | }</script>
| |
| | | | |
| | </body> | | </body> |
| | </html> | | </html> |
