三行代码  ›  专栏  ›  技术社区  ›  thoughtpolice

CSS中单页导航栏按钮的滚动行为

  •  0
  • thoughtpolice  · 技术社区  · 1 月前

    我正在尝试使用纯HTML/CSS创建单页简历。我正在实现一个导航栏,当单击链接到div的按钮(在同一页上)时,它会自动向下滚动到该部分(具有滚动效果)。如何做到这一点?谢谢

    2 回复  |  直到 1 月前
        1
  •  1
  •   Ahmed Amer    1 月前

    嘿,我做了一个很简单的东西让你试试。你可以通过使用 <a> 链接到每个元素id的标记。要使滚动平滑,只需使用一些CSS scroll-behaviour:smooth

        <!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>Nav-bar</title>
                <link rel="stylesheet" href="styles.css" />
            </head>
            <body>
                <div class="nav-bar">
                    <ul class="nav-link">
                        <a href="#intro">Intro</a>
                    </ul>
                    <ul class="nav-link">
                        <a href="#work-experience">Work Experience</a>
                    </ul>
                    <ul class="nav-link">
                        <a href="#education">education</a>
                    </ul>
                    <ul class="nav-link">
                        <a href="#intrests">intrests</a>
                    </ul>
                    <ul class="nav-link">
                        <a href="#refrences">refrences</a>
                    </ul>
                </div>
                <div class="container">
                    <div id="intro" class="section">INTRO</div>
                    <div id="work-experience" class="section">WORK EXPERIENCE</div>
                    <div id="education" class="section">EDUCATION</div>
                    <div id="intrests" class="section">INTERESTS</div>
                    <div id="refrences" class="section">REFRENCES</div>
                </div>
            </body>
        </html>
    

    与一些css类似

        html {
            scroll-behavior: smooth;
        }
    
        .nav-bar {
            display: flex;
            list-style: none;
            width: 100%;
            background: black;
            color: white;
        }
    
        .nav-link > a {
            text-decoration: none;
            color: white;
            font-size: 1.5rem;
        }
    
        .section {
            height: 50vh;
            text-align: center;
            font-size: 3rem;
        }
    
        2
  •  1
  •   Proking73Questioneer    1 月前

    <a></a> )把身份证放进去( <a href="#divid"></a> scroll-behavior scroll-behavior: smooth; 用于在身体或链接上平滑滚动。