jQuery学习手册（17）

最新推荐文章于 2024-09-25 14:00:00 发布

全栈工程师MrL

最新推荐文章于 2024-09-25 14:00:00 发布

阅读量73

点赞数

分类专栏：橘子太酸辣笔记 jQuery 文章标签： javascript jquery webkit 前端

本文链接：https://blog.csdn.net/czzyw/article/details/116591608

版权

笔记同时被 3 个专栏收录

150 篇文章 1 订阅

订阅专栏

橘子太酸辣

118 篇文章 0 订阅

订阅专栏

jQuery

25 篇文章 0 订阅

订阅专栏

scrollTop（）

获取滚动的偏移位

<!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">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .scroll {
            width: 100px;
            height: 200px;
            border: 1px solid #000;
            overflow: auto;
        }
    </style>
    <script>
        $(function() {
            var btns = document.getElementsByTagName('button')
            btns[0].onclick = function() {
                // console.log($('.scroll').scrollTop())
                console.log($('body').scrollTop() + $('html').scrollTop())
            }
            btns[1].onclick = function() {
                // $('.scroll').scrollTop(500)
                $('html,body').scrollTop(500)
            }
        })
    </script>
    <title>Document</title>
</head>

<body>
    <div class="scroll">
        白居易（772年－846年），字乐天，号香山居士，又号醉吟先生，祖籍山西太原 [1-2] ，到其曾祖父时迁居下邽，生于河南新郑。 [3] 是唐代伟大的现实主义诗人，唐代三大诗人之一。白居易与元稹共同倡导新乐府运动，世称“元白”，与刘禹锡并称“刘白”。 [4] 白居易的诗歌题材广泛，形式多样，语言平易通俗，有“诗魔”和“诗王”之称。官至翰林学士、左赞善大夫。公元846年，白居易在洛阳逝世，葬于香山。有《白氏长庆集》传世，代表诗作有《长恨歌》《卖炭翁》《琵琶行》等。
    </div>
    <button>获取</button>
    <button>设置</button>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>

</html>

在这里插入图片描述
每日一句
当你懈怠的时候，请想一下你父母期盼的眼神。