zoukankan      html  css  js  c++  java
  • scrollTop,offset().top

    1.scrollTop是指滚动条滚动的距离

    如果没有出现滚动条,则距离为0

    css:

    <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            input{
                position: fixed;
    
            }
            .div1{
                 200px;
                height: 200px;
                overflow-y: scroll;
                border: 1px solid #d74147;
            }
            .div3{
                 200px;
                height: 200px;
                border: 1px solid #d74147;
                margin: 10px 0;
            }.div4{
                          30px;
                         height: 30px;
                         background: #dd8811;
            }
            .div2{
                 30px;
                height: 130px;
                background: #dd0077;
                overflow-y: scroll;
            }
        </style>
    

      body:

    <input type="button" value="点击"/>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <div class="div1">
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
    </div>
    
        <div class="div2">
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
        </div>
    
    <p class="div5">1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    
    <div class="div3">
        <div class="div4">
        </div>
    </div>
    

      js

    $(function(){
                $('input').click(function() {
                    //alert($('.div2').scrollTop());
    
                    //alert($('.div1').offset().top);//90
    
                    //alert($('body').scrollTop());
    
                    //alert($('.div1').offset().top);
                    //alert($('body').offset().top);
                    alert($('html').offset().top);//负数是因为找不到
                    //alert($('html').scrollTop());
                    //alert($('.div1').scrollTop());
    
    
                });
            });
    

      

    2offset().top指的是到文档的距离

    不是到可视区域的文档的距离,是最顶部的文档的距离

    http://www.heishou.com.cn/点击这个链接,交流论坛黑手安全网

  • 相关阅读:
    关于enum ,调用webservice,用户控件与主页面之间的交互,datsource属性,net面试题,反射类生成sql语句,URl重写一个小实例
    一个很简单的图片上传后立即显示在页面的控件(c#)
    委托之实现异步调用
    跟我学Linq
    w3c关于sql sever的基础操作
    join操作基础
    表操作基础
    javascript理论篇(详情见地址)
    android universal-image-loader的使用
    json相关类库,java对象与json相互转换
  • 原文地址:https://www.cnblogs.com/shenq/p/4968341.html
Copyright © 2011-2022 走看看