jquery 添加 padding_jQuery 操作元素的位置

最新推荐文章于 2023-03-29 21:13:11 发布

小象扑满

最新推荐文章于 2023-03-29 21:13:11 发布

阅读量1.3k

点赞数

文章标签： jquery 添加 padding

本文链接：https://blog.csdn.net/weixin_42528090/article/details/113582260

版权

本文主要介绍了jQuery如何获取元素距离文档及上级定位元素的位置，并详细阐述了如何操作页面卷去的间距，包括获取和设置 scrollTop 的方法。

摘要由CSDN通过智能技术生成

好好学习，天天向上

本章主要内容是：获取元素距离文档的位置、距离上级定位参考元素的位置、操作卷去的页面间距

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .fa {
        position: relative;
        width: 300px;
        height: 300px;
        background-color: pink;
        margin: 50px;
    }
    .son {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 100px;
        height: 100px;
        background-color: skyblue;
    }
</style>

<div class="fa">
        <div class="son"></div>
</div>

1、获取元素距离文档的位置

语法：jQuery 对象.offset();
返回一个对象，对象中包含了元素的位置
注意：offset() 方法获取的元素的位置，永远参照文档,和定位没有关系

var $son = $(".son");
var offsetObj = $son.offset();
console.log(offsetObj)
console.log(offsetObj.left)
console.log(offsetObj.top)

2、距离上级定位参考元素的位置

语法：jQuery 对象.position();
返回的一个对象，对象中包含了元素的位置
注意：position() 方法获取的元素的位置,参照最近的定位元素（和定位有关系）

var positionObj = $son.position();
console.log(positionObj)
console.log(positionObj.left)

3、操作卷去的页面间距

获取
- 语法：jQuery 对象.scrollTop();
- 返回数字
设置
- 语法：jQuery 对象.scrollTop(数字);

<style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        height: 4000px;
    }
    .box {
        width: 200px;
        height: 200px;
        border: 1px solid #333;
        margin: 50px auto;
        font: 16px/32px "宋体";
        overflow: auto;
    }
    input {
        position: fixed;
        bottom: 50px;
        right: 50px;
    }
</style>

<div class="box">
        <p>段落内容</p>
        <p>段落内容</p>
        <p>段落内容</p>
</div>

<script>
    // 给元素添加滚动事件
    $(".box").scroll(function () {
        // 获取滚动条卷走的距离
        console.log($(this).scrollTop())
    })

    // 给文档设置滚动事件
    $(document).scroll(function () {
        // 获取滚动条卷走的距离
        console.log($(this).scrollTop())
    })

    // 通过点击返回顶部按钮，将文档的卷走的距离设置为 0 
    $(".backtop").click(function () {
        // 设置 scrollTop 的值
        $(document).scrollTop(0)
    })
</script>