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/点击这个链接,交流论坛黑手安全网

  • 相关阅读:
    每日总结50
    每日总结49
    每日总结48
    每日总结47
    每日总结46
    每日总结45
    每日总结44
    每日总结42
    每日总结41
    每日总结39
  • 原文地址:https://www.cnblogs.com/shenq/p/4968341.html
Copyright © 2011-2022 走看看