获取元素位置offset、client、scroll

        // 父元素中存在position时，获取该元素距离第一个具有定位的父元素的距离
        // 父元素中不存在position时，获取元素距离body的距离
        // 获取的距离会自动取整（测试时谷歌三舍四入、火狐四舍五入）
        let offsetLeft = document.getElementById(‘s_box‘).offsetLeft
        let offsetTop = document.getElementById(‘s_box‘).offsetTop
        // 获取元素的大小（border内，含border、含滚动条）
        let offsetWidth = document.getElementById(‘s_box‘).offsetWidth
        let offsetHeight = document.getElementById(‘s_box‘).offsetHeight
        // 获取body宽高
        let bodyWidth = document.querySelector(‘body‘).offsetWidth
        let bodyHeight = document.querySelector(‘body‘).offsetHeight    

        // 始终获取的元素距离body的距离，保留小数
        $(‘#s_box‘).offset().top
        $(‘#s_box‘).offset().left

        // 获取元素border宽度
        let clientLeft = document.getElementById(‘s_box‘).clientLeft
        let clientTop = document.getElementById(‘s_box‘).clientTop
        // 获取元素可视范围的宽高（border内，不含border、不含滚动条）
        let clientWidth = document.getElementById(‘s_box‘).clientWidth
        let clientHeight = document.getElementById(‘s_box‘).clientHeight

        // 获取页面滚动距离
        // 没有DOCTYPE声明==>23467有效
        // 有DOCTYPE声明==>12345有效
        console.log(document.documentElement.scrollTop, ‘---->1‘)
        console.log(window.pageYOffset, ‘---->2‘)
        console.log($(window).scrollTop(), ‘---->3‘)
        console.log($(document).scrollTop(), ‘---->4‘)
        console.log($(‘html‘).scrollTop(), ‘---->5‘)
        console.log(document.body.scrollTop, ‘---->6‘)
        console.log($(‘html body‘).scrollTop(), ‘---->7‘)
        // js兼容写法
        let bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
        // 获取子元素在父元素内的滚动距离，即父容器滚动距离（这里的#box是父元素）
        $(‘#box‘).scroll(function () {
            console.log($(‘#box‘).scrollTop())
            console.log(document.getElementById(‘box‘).scrollTop)
        })
        //滚动位置可以重写，其他xxTop、xxLeft都是只读
        $(‘#box‘).scrollTop(100)
        //scrollHeight，个人理解是指元素滚动范围的高度
        //scrollHeight=父容器高度（不含border）+元素可滚动的最大距离（即scrollTop最大值）
        //scrollHeight=子元素高度（含border）+父容器的padding
        console.log(document.getElementById(‘box‘).scrollHeight)

        $(‘.content_select‘).on(‘click‘, ‘.content_select_circular‘, function (e) {
            let num = $(this).index()
            let scrollTop = $(‘#box‘).scrollTop();//父容器滚动距离
            let dotop = $(‘#box>.subject‘).eq(num).offset().top;//滚动元素距离文档顶部距离
            let hei = $(‘#box‘).offset().top;//父容器距离文档顶部距离
            $(‘#box‘).animate({
                scrollTop: scrollTop + dotop - hei
            }, 500);
        })