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

Question

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

Answer 1

只需制作 href 或如何以正常方式将 link 打开到 div 的 ID，例如；如果您的代码是顶部的 link (<a></a>)，只需在 (<a href="#divid"></a>) 的 href 中放置一个 id。将 css 中的 scroll-behavior 设置为 scroll-behavior: smooth; 以便在 body 或 link.

上平滑滚动

Answer 2

嘿，我模拟了一些非常简单的东西供您试用。您可以通过使用 <a> 标签来实现您正在寻找的内容，这些标签 link 到每个元素的 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;
    }

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

Scrolling behaviour for single page navbar button in CSS

html

css

navbar

web