Difference between revisions of "Team:Mingdao"

Line 9: Line 9:
  
 
<style>
 
<style>
 +
 +
body {
 +
  font-family: Arial, Helvetica, sans-serif;
 +
  font-size: 20px;
 +
}
 +
 +
#myBtn {
 +
  display: none;
 +
  position: fixed;
 +
  bottom: 20px;
 +
  right: 30px;
 +
  z-index: 99;
 +
  font-size: 18px;
 +
  border: none;
 +
  outline: none;
 +
  background-color: red;
 +
  color: white;
 +
  cursor: pointer;
 +
  padding: 15px;
 +
  border-radius: 4px;
 +
}
 +
 +
#myBtn:hover {
 +
  background-color: #555;
 +
}
 +
 
* {
 
* {
 
     box-sizing: border-box;
 
     box-sizing: border-box;
Line 407: Line 433:
 
     </div>
 
     </div>
  
 +
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
  
 +
<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
 +
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>
 +
 +
<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;
 +
    document.documentElement.scrollTop = 0;
 +
}
 +
</script>
 
</body>
 
</body>
 
</html>
 
</html>
 
{{:Team:Mingdao/test6}}
 
{{:Team:Mingdao/test6}}

Revision as of 06:49, 17 October 2018

HOME
Description
Preview Preview Preview Preview Preview Preview

Project Motivation

Experimental Principle

DM

see more PDF

Scroll Down
This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.