HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。

利用onscroll事件写一个回到顶部功能，代码如下：

<!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" onclick="topfunction()" title="返回顶部">返回顶部</button> <div >向下滑动</div> <div >实现返回顶部功能</div></body> <script> //浏览器窗口执行 window.onscroll = function(){ changeScroll(); } //改变滚动距离 function changeScroll(){ if(document.body.scrollTop >20 || document.documentElement.scrollTop >20){ document.getElementById("mybtn").style.display = "block"; }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>web前端开发学习Q-q-u-n： 784-783-012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）

效果如下：