jQuery练习t230，从0到1

虾米大王 2021-02-04 15:24:16

分类专栏： jQuery JavaScript 文章标签： javascript jquery

本文链接：https://blog.csdn.net/modern358/article/details/113648245

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            height: 1800px;
        }
        div{
            position: fixed;
            right: 50px;
            bottom: 50px;
            display: none;
            width: 40px;
            height: 40px;
            color: white;
            background-color: #45b823;
            font-family: 微软雅黑;
            font-size: 15px;
            font-weight: bold;
            text-align: center;
            cursor:pointer;
        }
    </style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //滚动事件
            //回顶部特效
           $(window).scroll(function () {
               if($(this).scrollTop() > 300)
               {
                   $("div").css("display","inline-block");
               }
               else
               {
                   $("div").css("display","none");
               }
           });

           $("div").click(function () {
               $("html,body").scrollTop(0);
           });

        });
    </script>
</head>
<body>
    <h3>虾米大王</h3>
    <div>回到顶部</div>
</body>
</html>