Javascript HTML DOM event allows different registered event handlers in an HTML document element. Event is usually used in conjunction with the function, the function will not be executed before the event occurs! (Such as the user clicks the button).
Onscroll use the event to write a return to the top of the function code is as follows:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#mybtn{position: fixed;height: 40px;width: 100px;background: red;border: none;border-radius: 5px;right: 20px;bottom: 20px;cursor: pointer;display: none;}
#mybtn:hover{background-color: #888888;color: #FFFFFF;}
</style>
</ head>
<body>
<Button ID = "myBtn" the onclick = "topfunction ()" title = "Top"> Top </ button>
<div style = "height: 100px ; background-color: # 000000; color: #FFFFFF; font-size: 50px; text-align: center; line-height: 100px;"> slide downwardly </ div>
<div style = "background-color: lightgray ; padding: 30px 30px 2500px; text-align: center; font-size: 30px;"> top functions implemented </ div>
</ body>
<Script> // browser window executed
= window.onscroll function () {
changeScroll ();
} // change the scrolling distance function changeScroll () {
IF (document.body.scrollTop> || document.documentElement.scrollTop 20 is> 20 is
document.getElementById ( "myBtn"). style.display = "block";
}
scrollTop >20){else{
document.getElementById("mybtn").style.display = "none";
}
}
function topfunction(){
var timer = setInterval(function(){
document.body.scrollTop -= 20;
document.documentElement.scrollTop -=20;
if(document.body.scrollTop ==0 && document.documentElement.scrollTop ==0){
clearInterval(timer);
}
},30)
}
</script>
</html>