js滚动事件

时间  2020-12-01
标签 javascript css html java spa code orm htm blog 栏目 JavaScript 繁體版
原文   原文链接 
<!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>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程