23-jQuery的scrollTop方法

最新推荐文章于 2023-08-10 17:49:37 发布

杨亚仑

最新推荐文章于 2023-08-10 17:49:37 发布

阅读量267

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery入门练习

本文链接：https://blog.youkuaiyun.com/yangyalun/article/details/82969998

jQuery入门练习专栏收录该内容

60 篇文章

订阅专栏

本文详细介绍了jQuery中scrollTop方法的使用，包括如何获取和设置元素的滚动偏移位置，特别关注了不同浏览器间的兼容性问题，如在IE和其他浏览器中分别使用body和html来获取和设置滚动位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>23-jQuery的scrollTop方法</title>
    <script src="JS_file/jquery-1.12.4.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .scroll{
            width: 100px;
            height: 200px;
            border: 1px solid #000;
            overflow: auto;
        }
    </style>
    <script>
         $(function () {
                 //    编写jQuery相关代码
             var btns=document.getElementsByTagName("button");
             btns[0].onclick=function () {
                 //获取滚动的偏移位
                // console.log($(".scroll").scrollTop());;
                 //获取网页滚动的偏移位
                 //注意点：为了保证浏览器的兼容，获取网页的偏移位需要按照如下的写法，IE下是$("body"),其他是$("html")
                 console.log($("html").scrollTop()+$("body").scrollTop());
             };
             btns[1].onclick=function () {
                 //设置滚动的偏移位
                 $(".scroll").scrollTop(300);
                //设置网页滚动偏移位
                 //注意点：为了保证浏览器的兼容，设置网页的偏移位需要按照如下的写法，IE下是$("body"),其他是$("html")
                 $("html,body").scrollTop(300);
             };
         })
    </script>
</head>
<body>
<div class="scroll">我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我
    是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
    我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
    我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是di
    v我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
</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>


</body>
</html>