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

原文地址:https://www.cnblogs.com/shenq/p/4968341.html