元素的位置和滚动效果

offset and position

offset:相对于页面左上角的位置（可以有参数）

position：相对于父元素左上角的位置

$('#btn1').click(function(){
        //相对于页面左上角的位置
        var offset = $('.div1').offset()
        console.log(offset.left,offset.top)
        offset = $('.div2').offset()
        console.log(offset.left,offset.top)
        //相对于父元素左上角的位置
        var position = $('.div1').position()
        console.log(position.left,position.top)
        position = $('.div2').position()
        console.log(position.left,position.top)
        
      })
      //offset可以传入参数获取值
      $('#btn1').click(function(){
        $('.div2').offset({
          left:50,
          top:100
        })
      })

scroll

    1. scrollTop():

      读取/设置滚动条的Y坐标

    2. $(document.body).scrollTop()+$(document.documentElement).scrollTop()

      读取页面滚动条的Y坐标(兼容chrome和IE)

    3. $('body,html').scrollTop(60);

      滚动到指定位置(兼容chrome和IE)

l

     <script type="text/javascript">
        $('#btn1').click(function(){
            console.log($('div').scrollTop())//页面滚动条的坐标
            //兼容问题
            console.log($('html').scrollTop()+$('body').scrollTop())//全部的滚动条
             
            console.log($(document.documentElement).scrollTop()+$(document.body).scrollTop())//全部的滚动条//效率高一点
        })
        $('#btn2').click(function(){
            $('div').scrollTop(200)//滚动到指定的位置
            $('html,body').scrollTop(300)
        })

    </script>

尺寸

    <script src="js/jquery-1.12.3.js"></script>
    <script type="text/javascript">
        var $div = $('div')
        //内容尺寸
        console.log($div.width(),$div.height())//100.150
        //内部尺寸
        console.log($div.innerWidth(),$div.innerHeight())//120 170
        //外部尺寸
        //height+padding +border
        console.log($div.outerWidth(),$div.outerHeight())
        console.log($div.outerWidth(true),$div.outerHeight(true))
        //如果是true再加上margin
    </script>