jQuery第二天笔记02——jq滚动对象

最新推荐文章于 2023-07-27 14:05:10 发布

·青红造了个白·

最新推荐文章于 2023-07-27 14:05:10 发布

阅读量92

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_43861647/article/details/119730559

版权

<!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>Document</title>
        <style>
            button:nth-of-type(1){
                position: fixed;
                bottom:50px;
                right:100px
            }
            button:nth-of-type(2){
                position: fixed;
                bottom:20px;
                right:100px
            }
           
        </style>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li class="one">文字文字</li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <button>回到文字所在位置</button>
        <button>回到顶部</button>
        <script src="js/jquery.min.js"></script>
        <script>
            $('button').eq(0).click(function(){
                // 控制窗口滚动
                // $(window).scrollTop(0)
                // 带有动画的控制窗口滚动 选择器需要选择html,body
                // scrollTop滚动坐标
                // $('html,body').animate({'scrollTop':'200px'})
                // 获取标签距离页面原点的坐标  获取标签.offset().top
                $('html,body').animate({'scrollTop':$('.one').offset().top})
            })
            $('button').eq(1).click(function(){
                $(window).scrollTop(0);
            });
            // 监听页面滚动事件
            $(window).scroll(function(){
                // 获取滚动坐标值
                console.log($(window).scrollTop());
            })
        </script>
    </body>
</html>

控制窗口滚动的方法：

一、不带动画

$(window).scrollTop(垂直滚动条位置)

二、带动画

$('html,body').animate({'scrollTop':'垂直滚动条位置'});

·青红造了个白·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery第二天笔记02——jq滚动对象

<!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"> .
复制链接

扫一扫