jQuery的scroll滚动条属性

最新推荐文章于 2024-09-30 09:15:00 发布

大陈&

最新推荐文章于 2024-09-30 09:15:00 发布

阅读量905

点赞数

分类专栏：平时笔记 JQ 文章标签： jQuery 滚动条坐标平滑滚动页面定位

本文链接：https://blog.csdn.net/dad188/article/details/120252021

版权

平时笔记同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="height: 2000px;">
<div style="border:1px solid black;width:100px;height:150px;overflow:auto">
    This is some text. This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text. This is some text.
    his is some text.
</div>
<br>
<br>
<br>
<button id="btn1">得到scrollTop</button>
<button id="btn2">设置scrollTop</button>

<!--
1. scrollTop():
  读取/设置滚动条的Y坐标
2. $(document.body).scrollTop()+$(document.documentElement).scrollTop()
  读取页面滚动条的Y坐标(兼容chrome和IE)
3. $('body,html').scrollTop(60);
  滚动到指定位置(兼容chrome和IE)
-->
<script src="js/jquery-3.6.0.min.js"></script>
<script>
    /*
     需求:
     1. 得到div或页面滚动条的坐标
     2. 让div或页面的滚动条滚动到指定位置
     */
    //1. 得到div或页面滚动条的坐标
    $('#btn1').click(function () {
        console.log($('div').scrollTop());
        // console.log($('html').scrollTop()+$('body').scrollTop())
        console.log($(document.documentElement).scrollTop()+$(document.body).scrollTop()) // 兼容IE/Chrome
    })
    //2. 让div或页面的滚动条滚动到指定位置
    $('#btn2').click(function () {
        $('div').scrollTop(200);
        $('html,body').scrollTop(300)
    })
</script>
</body>

</html>

jQuery的滚动条效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的滚动条效果</title>
    <style>
        #to_top {
            width: 30px;
            height: 40px;
            font: 14px/20px arial;
            text-align: center;
            background: #06c;
            position: fixed;
            cursor: pointer;
            color: #fff;
            left: 1050px;
            top: 500px;
        }
    </style>
</head>
<body style="height: 2000px;">

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

<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $('#to_top').click(function () {
        // 瞬间滚到顶部
        //$('html,body').scrollTop(0)

        // 平滑滚到顶部
        // 总距离
        var $page = $('html,body')
        var distance = $('html').scrollTop() + $('body').scrollTop()
        // 总时间
        var time = 500
        // 间隔时间
        var intervalTime = 50
        var itemDistance = distance/(time/intervalTime)
        // 使用循环定时器不断滚动
        var intervalId = setInterval(function () {
            distance -= itemDistance
            // 到达顶部, 停止定时器
            if(distance<=0) {
                distance = 0 //修正
                clearInterval(intervalId)
            }
            $page.scrollTop(distance)
        }, intervalTime)

    })
</script>
</body>
</html>