jq点击下滑开屏效果

现在做这个是一个开屏效果
网站刚进来是html.to-begin
我下拉屏幕或者点击下开屏这个.top的时候.to-begin在3秒回变成to-content

html>
<html lang="en" class="to-trol to-begin">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>开屏效果title>
    <script src="https://code.jquery.com/jquery-1.7.2.js">script>
head>
<body>
<style>
html,body{margin:auto}
.top{height: 100vh;background:#ddd;}  
.home{height:1000px;background: rgb(16, 146, 189);}  
/*html.to-begin{overflow: hidden;}
html.to-content{overflow:initial;}*/
div{position: relative;display: flex;justify-content: center;align-items: center;}
p{color:#333;font-size:40px}
style>    

<div class="top">
    <p>开屏p>
div>
<div class="home">
    <p>内容p>
div>


body>
html>

<!doctype html>
<html lang="en" class="to-trol to-begin">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>开屏效果</title>
    <script src="https://code.jquery.com/jquery-1.7.2.js"></script>
</head>

<body>
    <style>
        html,
        body {
            margin: auto
        }

        .top {
            height: 100vh;
            background: #ddd;
        }

        .home {
            height: 1000px;
            background: rgb(16, 146, 189);
        }

        /*html.to-begin{overflow: hidden;}
html.to-content{overflow:initial;}*/
        div {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        p {
            color: #333;
            font-size: 40px
        }
    </style>

    <div class="top">
        <p>开屏</p>
    </div>
    <div class="home">
        <p>内容</p>
    </div>
</body>

</html>
<script>

    $(".top").click(() => {
        var num = 3;
        var timer = setInterval(function () {
            num--;
            if (num == 0) {
                $(".top").hide();
                clearInterval(timer);
            }
        }, 1000)

    });
</script>

https://ask.csdn.net/questions/7759429?spm=1005.2026.3001.5635&utm_medium=distribute.pc_relevant_ask_down.none-task-ask-2~default~OPENSEARCH~Rate-2-7759429-ask-7778580.pc_feed_download_top3ask&depth_1-utm_source=distribute.pc_relevant_ask_down.none-task-ask-2~default~OPENSEARCH~Rate-2-7759429-ask-7778580.pc_feed_download_top3ask



<!doctype html>
<html lang="en" class="to-trol to-begin">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>开屏效果</title>
    <script src="https://code.jquery.com/jquery-1.7.2.js"></script>
</head>

<body>
    <style>
        html,
        body {
            margin: auto
        }

        .top {
            height: 100vh;
            background: #ddd;
        }

        .home {
            height: 1000px;
            background: rgb(16, 146, 189);
        }

        /*html.to-begin{overflow: hidden;}
html.to-content{overflow:initial;}*/
        div {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        p {
            color: #333;
            font-size: 40px
        }
    </style>

    <div class="top">
        <p>开屏</p>
    </div>
    <div class="home">
        <p>内容</p>
    </div>
</body>

</html>
<script>

    $(".top").click(() => {
        $(".top").animate({
            height: '-5px'
        }, 3000, () => {
            $(".top").hide();
        });
    });

    $(window).scroll(function () {
        var st = $(window).scrollTop();
        if (st > 80) {
            $(".top").toggle();
        }
    });

</script>