1. 程式人生 > 其它 >jQuery練習t230,從0到1

jQuery練習t230,從0到1

技術標籤:jQueryJavaScriptjavascriptjquery

<!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>