zoukankan      html  css  js  c++  java
  • jQuery元素滚动 安静点

    元素滚动
    1. scrollTop():
      读取/设置滚动条的Y坐标
    2. $(document.body).scrollTop()+$(document.documentElement).scrollTop()
      读取页面滚动条的Y坐标(兼容chrome和IE)
    3. $('body,html').scrollTop(60);
      滚动到指定位置(兼容chrome和IE)
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title>13_元素滚动</title>
    </head>
    <body style="height: 2000px;">
    <div style="border:1px solid black;100px;height:150px;overflow:auto">
      This is some text. This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text. This is some text.
      his is some text.
    </div>
    <br>
    <br>
    <br>
    <button id="btn1">得到scrollTop</button>
    <button id="btn2">设置scrollTop</button>
    
    <!--
    1. scrollTop():
      读取/设置滚动条的Y坐标
    2. $(document.body).scrollTop()+$(document.documentElement).scrollTop()
      读取页面滚动条的Y坐标(兼容chrome和IE)
    3. $('body,html').scrollTop(60);
      滚动到指定位置(兼容chrome和IE)
    -->
    <script src="js/jquery-1.10.1.js"></script>
    <script>
      /*
       需求:
       1. 得到div或页面滚动条的坐标
       2. 让div或页面的滚动条滚动到指定位置
       */
      //1. 得到div或页面滚动条的坐标
      $('#btn1').click(function () {
        console.log($('div').scrollTop())
        //下面2种都是兼容了chrome和ie浏览器的写法,因为
        console.log($('html').scrollTop()+$('body').scrollTop())
        //原生js写法
        console.log($(document.documentElement).scrollTop()+$(document.body).scrollTop())  
      })
      //2. 让div或页面的滚动条滚动到指定位置
      $('#btn2').click(function () {
        $('div').scrollTop(200)
        //并集的写法,用逗号隔开,设置y轴离顶部300px,
        $('html,body').scrollTop(300)
      })
    </script>
    </body>
    
    </html>

    界面:

    1

  • 相关阅读:
    引用 AspNetCoreRateLimit => StatusCode cannot be set because the response has already started.
    Sublime Json 格式化
    gitlab 建立本地仓库
    R语言 启动报错 *** glibc detected *** /usr/lib64/R/bin/exec/R: free(): invalid next size (fast): 0x000000000263a420 *** 错误 解决方案
    范数
    SparkR-Install
    R语言扩展包dplyr——数据清洗和整理
    R语言与机器学习学习笔记
    sparkR原理
    data.frame类型数据如何将第一列值替换为行号
  • 原文地址:https://www.cnblogs.com/anjingdian/p/15564110.html
Copyright © 2011-2022 走看看