为什么我的html / css导航栏没有跳转到给定的类？

Question

所以我创建了一个简单的单页个人网站，其中包含几个元素; “家”，“关于我”，“简历”和“联系方式”。我已经在导航栏类中实现了它。但是，当我使用导航栏时，它不会跳转到我选择的类！谁能解决这个问题？

我使用的代码示例（有些是荷兰语）：

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
             aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About Me</a></li>
                <li><a href="#portfolio">CV</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

<header id="home" class="home">
    <div class="overlay sections">
        <div class="container">

            <div class="row">
                <div class="wrapper">
                    <div class="col-md-6 col-md-offset-3">

                        <div class="home-details text-center">

                            <div class="logo">
                                <img src="assets/img/Logo.png" alt="Logo" />
                            </div>

                            <div class="home-title">
                                <h1><span>TIM</span>DIJKSTRA</h1>
                            </div>

                            <div class="scroll-down">
                                <h5>Scroll naar beneden voor meer!</h5>
                                <a href="#about"><i class="fa fa-angle-double-down"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<section id="about" name="about" class="about sections">
    <div class="container">

        <div class="row">
            <div class="wrapper">

                <div class="col-md-6">
                    <div class="about-photo">
                        <img src="assets/img/Tim.png" alt="Tim Dijkstra" />
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="heading about-content">
                        <h3>About Me</h3>
                        <p>Hoi, ik ben Tim!</p>
                        <p>Een gedreven student met een passie voor alles wat software is. Sinds mijn jeugdjaren ben ik al
                            geïnteresseerd in het ontwikkelen van applicaties. Het was dan ook een logische stap om deze hobby door te
                            zetten tot mijn huidige studie, Software Ontwikkeling op de Avans University of Applied Sciences in
                            's-Hertogenbosch. Sindsdien heb ik gewerkt met verschillende programmeertalen en frameworks, zoals Java, SQL,
                            C#, HTML/CSS, PHP, Python en meer.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="scroll-down">
            <h6>Blijf scrollen, er is nog meer te zien!</h6>
            <a href="#portfolio"><i class="fa fa-angle-double-down"></i></a>
        </div>
    </div>
</section>

<section id="portfolio" class="portfolio">
    <div class="overlay sections">
        <div class="container">

            <div class="heading text-center">
                <div class="title">

                    <h3>CV</h3>

                    <div class="portfolio-item">
                        <div class="portfolio-details">

                            <a href="assets/doc/CV.pdf" target="_blank">
                                <img src="assets/img/CV.png" />
                            </a>

                        </div>
                    </div>

                    <div class="scroll-down">
                        <h5>Blijf scrollen, er is nog meer te zien!</h5>
                        <a href="#contact"><i class="fa fa-angle-double-down"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="contact" class="contact sections">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="contact-details text-center">

                    <div class="contact-category">
                        <div class="mail">
                            <h5>Mail :</h5>
                            <h2><a href="mailto:[email protected]">[email protected]</a></h2>
                        </div>
                    </div>

                    <div class="contact-category">
                        <div class="linkedin">
                            <h5>LinkedIn :</h5>
                            <h2><a href="https://www.linkedin.com/in/timdijkstra/" target="_blank">www.linkedin.com/in/timdijkstra</a></h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<footer id="footer" class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="copyright text-center">
                    <p>Website made by Tim Dijkstra. All rights reserved.</p>
                </div>
            </div>
        </div>
    </div>
</footer>

Answer 1

欢迎来到Stackoverflow！

您想要单击一个标签，然后当前视图应移动到具有href中指定的ID的标签，不是吗？

对我来说，它确实适用于您的代码。

看看这个：https://codepen.io/anon/pen/vPjbaQ

由于链接锚和id是html specification，这就是你需要的一切：

<a href="myCustomAnchor">Click me to move to 'myCustomAnchor'</a>

<section id="myCustomAnchor">Some Content .... </div>