<!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>
js滾動事件
相關文章
- 1. js 捕捉滾動條事件
- 2. JS網頁滾動條滾動事件實例分析
- 3. 頁面滾動條滾動後返回事件----JS
- 4. jQuery 滾輪滾動事件
- 5. 滾輪滾動事件
- 6. JavaFX滾動事件
- 7. JQuery4：鼠標事件和滾動事件
- 8. js滾動加載插件
- 9. vue監聽滾動事件，實現滾動監聽(scroll滾動)
- 10. jquery監聽頁面滾動條滾動事件 jquery監聽頁面滾動條滾動事件
- 更多相關文章...
- • ionic 滾動條 - ionic 教程
- • jQuery Mobile 滾屏事件 - jQuery Mobile 教程
- • SpringBoot中properties文件不能自動提示解決方法
- • IntelliJ IDEA中SpringBoot properties文件不能自動提示問題解決
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. js 捕捉滾動條事件
- 2. JS網頁滾動條滾動事件實例分析
- 3. 頁面滾動條滾動後返回事件----JS
- 4. jQuery 滾輪滾動事件
- 5. 滾輪滾動事件
- 6. JavaFX滾動事件
- 7. JQuery4：鼠標事件和滾動事件
- 8. js滾動加載插件
- 9. vue監聽滾動事件，實現滾動監聽(scroll滾動)
- 10. jquery監聽頁面滾動條滾動事件 jquery監聽頁面滾動條滾動事件