js滚动事件

最新推荐文章于 2024-07-25 12:43:51 发布

weixin_33905756

最新推荐文章于 2024-07-25 12:43:51 发布

阅读量1.1k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wwthuanyu/p/10555248.html

版权

<!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>