Advertisement
Guest User

Untitled

a guest
Jul 18th, 2018
160
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.23 KB | None | 0 0
  1. <html>
  2. <head>
  3. <!--Put the following CSS Code into the CSS Code box to tidy it up a bit.-->
  4. /* START */
  5. #myBtn {
  6. display: none;
  7. position: fixed;
  8. bottom: 25px;
  9. right: 25px;
  10. z-index: 99;
  11. border: none;
  12. outline: none;
  13. background-color: green;
  14. color: white;
  15. cursor: pointer;
  16. padding: 20px;
  17. border-radius: 13px;
  18. }
  19.  
  20. #myBtn:hover {
  21. background-color: #555;
  22. }
  23. /* END */
  24. </head>
  25. <body>
  26.  
  27. <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
  28.  
  29.  
  30. <!--You have to leave the JS in the script tag because there is an issue with it for some reason, I have tested.-->
  31. <script>
  32. // When the user scrolls down 20px from the top of the document, show the button
  33. window.onscroll = function() {scrollFunction()};
  34.  
  35. function scrollFunction() {
  36. if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
  37. document.getElementById("myBtn").style.display = "block";
  38. } else {
  39. document.getElementById("myBtn").style.display = "none";
  40. }
  41. }
  42.  
  43. // When the user clicks on the button, scroll to the top of the document
  44. function topFunction() {
  45. document.body.scrollTop = 0;
  46. document.documentElement.scrollTop = 0;
  47. }
  48. </script>
  49.  
  50. </body>
  51. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement