1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .div1{
  8.                 width: 700px;
  9.                 height: 7000px;
  10.                 background: cornsilk;
  11.             }
  12.             .child1{
  13.                 width: 100px;
  14.                 height: 100px;
  15.                 background: skyblue;
  16.                 position: absolute;
  17.                 left: 50%;
  18.                 top: 2000px;
  19.             }
  20.             .ani{
  21.                 animation: suofang 1s alternate infinite;
  22.             }
  23.             @keyframes suofang{
  24.                 from{transform: scale(1);}
  25.                 to{transform: scale(2);}
  26.             }
  27.  
  28.             .child2{
  29.                 width: 100px;
  30.                 height: 100px;
  31.                 background: skyblue;
  32.                 position: absolute;
  33.                 left: 50%;
  34.                 top: 4000px;
  35.             }
  36.         </style>
  37.     </head>
  38.     <body>
  39.         <div class="div1">
  40.  
  41.             <div class="child1">
  42.  
  43.             </div>
  44.  
  45.             <div class="child2">回到上面</div>
  46.         </div>
  47.         <script type="text/javascript">
  48.             var html = document.querySelector('html')
  49.             window.onscroll = function(e){
  50.                 console.log(e)
  51.                 console.log(window.scrollY)
  52.                 console.log(html.scrollTop)
  53.  
  54.                 if(window.scrollY>1500){
  55.                     var child1 = document.querySelector('.child1')
  56.                     child1.className = 'child1 ani'
  57.                 }
  58.  
  59.             }
  60.  
  61.             document.querySelector('.child2').onclick = function(e){
  62.                 //设置全局滚动条滚动的位置
  63.                 //window.scrollTo(0,0)
  64.                 //设置垂直滚动条位置
  65. //                html.scrollTop = 0
  66. //                //设置水平滚动条的位置
  67. //                html.scrollLeft = 0
  68.             }
  69.         </script>
  70.     </body>
  71. </html>

js滚动事件的更多相关文章

  1. js滚动事件实现滚动触底加载

    移动端触底加载时前端开发过程中常用功能,主要是通过三个值的大小来进行判断: 首先介绍jquery的写法,代码如下: $(window).scroll(function(){ var windowH=$ ...

  2. js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...

  3. JS鼠标滚动事件

    -----------------------------//鼠标滚动事件以下是JS临听鼠标滚动事件 并且还考虑到了各浏览器的兼容----------------------------------- ...

  4. js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写

    js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写 一.总结 一句话总结:滚动事件scroll(),浏览器窗口调整监听resize(),思考好监听对象. 1.滚动事件scroll()的监听对象是 ...

  5. 页面滚动事件和利用JS实现回到顶部效果

    页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...

  6. js鼠标滑轮滚动事件绑定（兼容主流浏览器）

    /** Event handler for mouse wheel event. *鼠标滚动事件 */ var wheel = function(event) { var delta = 0; if ...

  7. js给页面添加滚动事件并判断滚动方向

    <script> var scrollFunc = function (e) { var direct = 0; e = e || window.event; if (e.wheelDel ...

  8. js监控鼠标滚动事件

    //滚动动画 windowAddMouseWheel(); function windowAddMouseWheel() { var scrollFunc = function (e) { e = e ...

  9. 19 01 15 js 尺寸相关 滚动事件

    尺寸相关.滚动事件 1.获取和设置元素的尺寸 width().height() 获取元素width和height innerWidth().innerHeight() 包括padding的width和 ...

随机推荐

  1. Guava的常用方法示例

    Guava Maven Dependency <dependency> <groupId>com.google.guava</groupId> <artifa ...

  2. windows核心编程 第8章201页旋转锁的代码在新版Visual Studio运行问题

    // 全局变量,用于指示共享的资源是否在使用 BOOL g_fResourceInUse = FALSE; void Func1() { //等待访问资源 while(InterlockedExcha ...

  3. 讨论c/c++计算小数的精度问题

    求出所有100以下整数与一位小数相乘等于相加的浮点数这个有Bug浮点数计算时精度会出现误差 除非使用非常精确的类型或限制浮点的位数 比如 #include <iostream> int m ...

  4. JQuery 数组按指定长度分组

    JQuery方法 // 将data每3个一组进行分组 var data = ['法国','澳大利亚','智利','新西兰','西班牙','加拿大','阿根廷','美国','0','国产','波多黎各' ...

  5. vue平行组件传值

    平行组件传值 通过平行组件传值可以实现任何情境下的传值,包括(父传子,子传父) 代码示例 <!DOCTYPE html> <html lang="en"> ...

  6. Python爬虫：获取JS动态内容

    经过一段时间的python学习,能写出一些爬虫了.但是,遇到js动态加载的网页就犯了难.于是乎谷歌.百度,发现个好介绍http://www.jianshu.com/p/4fe8bb1ea984 主要就 ...

  7. Linux kail安装及查看命令

    Linux kail安装及查看命令  apt-get update                          //更新源 apt-get install package             ...

  8. kettle 利用 HTTP Client 获取猫眼电影API近期上映相关信息，并解析json

    前言 Kettle 除了常规的数据处理之外,还可以模拟发送HTTP client/post ,REST client. 实验背景 这周二老师布置了一项实验: 建立一个转换,实现一个猫眼API热映电影的 ...

  9. Selenium+PhantomJS使用时报错原因

    运行下面代码:'''PhantomJS运用''' from selenium import webdriverimport time # 通过keys模拟键盘from selenium.webdriv ...

  10. RF页面断言

    title should be(断言title与预期指定的title内容相等): should be equal  (断言某个字符串与预期指定的字符串相等) should not be equal ( ...