Weronika77 (Talk | contribs) |
Weronika77 (Talk | contribs) |
||
Line 9: | Line 9: | ||
$("#mw-content-text").removeAttr('id'); | $("#mw-content-text").removeAttr('id'); | ||
}); | }); | ||
− | |||
− | |||
− | |||
− | |||
</script> | </script> | ||
<style> | <style> | ||
− | |||
− | |||
− | |||
− | |||
/* om MediaWiki style weg te halen*/ | /* om MediaWiki style weg te halen*/ | ||
p{ | p{ | ||
Line 128: | Line 120: | ||
display: block; | display: block; | ||
} | } | ||
+ | |||
+ | <!--- top button---> | ||
+ | #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 */ | ||
+ | } | ||
Line 149: | Line 162: | ||
} | } | ||
− | |||
− | |||
</style> | </style> | ||
<body> | <body> | ||
− | + | <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> | |
<!--de lijst | <!--de lijst | ||
Line 255: | Line 266: | ||
+ | <!----- 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("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> |
Revision as of 09:55, 21 June 2019