日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

jQuery 核心函數css和平滑滾動頂部

作者：1900's 88 keys 更新時間： 2022-01-16 編程語言

css

  1. 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>
  1. 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
})

在這里插入圖片描述

  1. 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
          })

在這里插入圖片描述

  1. 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

欄目分類
最近更新