<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ width: 700px; height: 7000px; background: cornsilk; } .child1{ width: 100px; height: 100px; background: skyblue; position: absolute; left: 50%; top: 2000px; } .ani{ animation: suofang 1s alternate infinite; } @keyframes suofang{ from{transform: scale(1);} to{transform: scale(2);} } .child2{ width: 100px; height: 100px; background: skyblue; position: absolute; left: 50%; top: 4000px; } </style> </head> <body> <div class="div1"> <div class="child1"> </div> <div class="child2">回到上面</div> </div> <script type="text/javascript"> var html = document.querySelector('html') window.onscroll = function(e){ console.log(e) console.log(window.scrollY) console.log(html.scrollTop) if(window.scrollY>1500){ var child1 = document.querySelector('.child1') child1.className = 'child1 ani' } } document.querySelector('.child2').onclick = function(e){ //设置全局滚动条滚动的位置 //window.scrollTo(0,0) //设置垂直滚动条位置 // html.scrollTop = 0 // //设置水平滚动条的位置 // html.scrollLeft = 0 } </script> </body> </html>