练习-返回顶部

最新推荐文章于 2022-11-28 00:03:39 发布

奋斗中的切图猿

最新推荐文章于 2022-11-28 00:03:39 发布

阅读量90

点赞数

分类专栏： jq

本文链接：https://blog.csdn.net/weixin_44573096/article/details/108935692

版权

jq 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 2000px;
        }
        button{
            width: 150px;
            height: 100px;
            color: red;
            font-size: 30px;
            position: fixed;
            right: 10px;
            bottom: 10px;
            display: none;
        }
    </style>
</head>
<body>
    <!-- 要求：做一个固定到页面右下角的按钮,点击时返回页面的顶部(按钮仍然不动，是当前屏幕的顶端回到页面顶部),要求该按钮只有在滚动距离超过200px时才能看见 -->
    <button>返回顶部</button>
    <script src="jquery-1.10.1.min.js"></script>
    <script>
        $("button").css("display",$(window).scrollTop()>200?"block":"none");
        $(window).scroll(function (){
            $("button").css("display",$(window).scrollTop()>200?"block":"none");
        })
        $("button").click(function (){
            $(window).scrollTop(0);
        })
    </script>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

奋斗中的切图猿

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
练习-返回顶部

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{
复制链接

扫一扫