点击tab跳转时 顺滑切换 

<!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>
</head>
<style>
    a {
        display: inline-block;
        width: 50px;
        text-decoration: none;
    }

    nav,
    .scroll-container {
        display: block;
        margin: 0 auto;
        text-align: center;
    }

    nav {
        width: 339px;
        padding: 5px;
        border: 1px solid black;
    }

    .scroll-container {
        width: 350px;
        height: 200px;
        overflow-y: scroll;
        scroll-behavior: smooth;
    }

    .scroll-page {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        font-size: 5em;
    }
</style>

<body>
    <nav>
        <a href="#page-1">1</a>
        <a href="#page-2">2</a>
        <a href="#page-3">3</a>
    </nav>
    <div class="scroll-container">
        <div class="scroll-page" id="page-1">1</div>
        <div class="scroll-page" id="page-2">2</div>
        <div class="scroll-page" id="page-3">3</div>
    </div>
</body>

</html>
posted @ 2022-02-18 17:58  JaneLifeVlog  阅读(74)  评论(0)    收藏  举报