网站首页编程语言正文

jQuery 核心函数css和平滑滚动顶部

作者：1900's 88 keys 更新时间： 2022-01-16 编程语言

css

css(name|pro)访问匹配元素的样式属性。

// 取得第一个段落的color样式属性的值
$("p").css("color");
// 将所有段落的字体颜色设为红色并且背景为蓝色
$("p").css({ 
	"color": "#ff0011",
 	"background": "blue" });
// 将所有段落字体设为红色
$("p").css("color","red");

位置

    <style>
    	*{
            margin: 0px;
        }
        .box1{
            width: 400px;
            height: 400px;
            background-color: lightblue;
            position: relative;
            left: 50px;
            top: 50px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: lightskyblue;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>

    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

offset([coordinates])用于设置或返回当前匹配元素相对于当前文档的偏移，也就是相对于当前文档的坐标。该函数值对可见元素有效。返回{top,left}对象

// 获取偏移量
 <script type="text/javascript">
     $(function(){
         var offset1 = $('.box1').offset()
         console.log(`box1: left:${offset1.left}px,top:${offset1.top}px`);
         var offset2 = $('.box2').offset()
         console.log(`box2: left:${offset2.left}px,top:${offset2.top}px`);
     })
 </script>

// 修改class名为box1的偏移量top为200px，left为100px
$('.box1').offset({
    top: 200,
    left: 100
})

在这里插入图片描述

position()获取匹配元素相对父元素的偏移。返回{top,left}对象

    <script type="text/javascript">
        $(function(){
            var position2 = $('.box2').position()
            console.log(`box2: left:${position2.left}px,top:${position2.top}px`);      
         })
    </script>

// 修改class名为box2的相对父元素偏移量top为100px，left为100px
$('.box2').position({
              top: 100,
              left: 100
          })

在这里插入图片描述

scrollTop([val])获取匹配元素相对滚动条顶部的偏移

// 得到div滚动条的坐标
console.log($('div').scrollTop());

// 得到页面滚动条的坐标
console.log($('html').scrollTop() + $('body').scrollTop());//兼容IE浏览器$('body').scrollTop()是获取IE浏览器的
console.log($(document.documentElement).scrollTop()+$(document.body).scrollTop());

// 修改div或页面滚动条到指定位置
$('div').scrollTop(200);
$('html, body').scrollTop(300);//兼容IE浏览器

常见效果之平滑滚动到顶部

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>平滑滚动到顶部</title>
    <style>
        * {
            margin: 0px;
        }

        body {
            height: 10000px;
        }

        #to_top {
            width: 40px;
            height: 40px;
            text-align: center;
            background-color: lightskyblue;
            cursor: pointer;
            position: fixed;
            bottom: 50px;
            right: 100px;
        }
    </style>

    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#to_top').click(function () {
                //   平滑滚动到顶部
                // 总距离
                let $page = $('html, body')
                let distance = $('html').scrollTop() + $('body').scrollTop();
                // 总时间
                let time = 1000;
                let intervalTime = 50;
                let itemDistance = distance / (time / intervalTime);
                let intervalId = setInterval(function () {
                    distance -= itemDistance;
                    // 到达顶部，停止定时器
                    if (distance <= 0) {
                        distance = 0;//修正
                        clearInterval(intervalId);
                    }
                    $page.scrollTop(distance);
                }, intervalTime)
            })
        })
    </script>
</head>

<body>
    <div id="to_top">返回顶部</div>
</body>

</html>

原文链接：https://blog.csdn.net/weixin_45660621/article/details/122202270

上一篇：jQuery 核心函数和动态更新员工表
下一篇：jQuery实现动画效果和导航栏动态显示

网站首页编程语言正文

jQuery 核心函数css和平滑滚动顶部

目录

css

位置

常见效果之平滑滚动到顶部

相关推荐

网站首页 编程语言 正文

jQuery 核心函数css和平滑滚动顶部

目录

css

位置

常见效果之平滑滚动到顶部

相关推荐

网站首页编程语言正文