zoukankan      html  css  js  c++  java
  • 深度理解Jquery 中 scrollTop() 方法

    这是工作遇到scrollTop() 方法。为了强化自己,把它记录在博客园当中。

    下面就开始scrollTop 用法讲解:

    scrollTop() 定义和用法

    scrollTop() 方法设置或返回被选元素的【垂直滚动条位置】。

    Note:

    当滚动条位置位于最顶部时,位置是0;
    当用于返回位置时:
        该方法返回 第一个匹配元素的滚动条的垂直位置。
    当用于设置位置时:
        该方法设置 所有匹配元素的滚动条的垂直位置。

     

    scrollTop() 语法

    返回滚动条位置

    $(selector).scrollTop()

    设置滚动条位置

    $(selector).scrollTop(position)

    参数position : 规定以像素为单位的垂直滚动条位置。

    scrollTop() 实例

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
    $("button").click(function(){
    alert($("div").scrollTop()+" px");
    });

    需要注意的是,这里的数值不能加引号。也不用加px.   只需要给数值就可以了

    $("#btn").click(function(){
    $("div").scrollTop(60));
    });
    });
    </script>
    </head>
    <body>

    <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.</div><br>

    <button>Return the vertical position of the scrollbar</button>

    <button id="btn">Return the vertical position of the scrollbar</button>
    <p>Move the scrollbar down and click the button again.</p>

    </body>
    </html>

  • 相关阅读:
    关于ie7下display:inline-block;不支持的解决方案。
    Unicode转义序列
    DOMContentLoaded与load的区别
    有关列分组,定义css样式无效的问题
    多行文字溢出[...]的实现(text-overflow: ellipsis)
    goahead cgi 及出现的问题解决
    Android面试题整理(1)
    回溯法 之 马周游(马跳日)问题
    软件工程总结
    [置顶] 每日震精图
  • 原文地址:https://www.cnblogs.com/htwdz-qhm/p/3958525.html
Copyright © 2011-2022 走看看