我网站的导航栏按钮之一没有跳转到屏幕的正确部分[关闭]

Question

这是我的导航栏按钮的 HTML

<button class="navbar-toggle" data-toggle = "collapse" data-target=".navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navHeaderCollapse">

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#Home" class="smoothScroll">Home</a></li>
                <li><a href="#About" class="smoothScroll">About</a></li>
                <li><a href="#Portfolio" class="smoothScroll">Portfolio</a </li>
                <li><a href="#Contact" class="smoothScroll">Contact</a></li>

            </div>

所以当我点击投资组合按钮时，它应该跳转到投资组合部分：这个

                <a name="Portfolio">
            <!-- <section id="Portfolio"> -->
            <div id="whitecontainer1">
                <h1> Portfolio </h1>
                hello
                <br>
                <br>
                <br>
                <br>
                <br>

            </div>
            </a>

但它会跳转/滚动到此部分

<section id="About">
            <div id="redcontainer1">
                <div id="aboutinfo">
                    <h2><strong>Ashpan Raskar</strong></h2>
                    <div id="aboutme">
                        I am an intuitive <strong> software developer</strong>, and newly a
<strong> web developer</strong>. I began by learning Java at the age of 10 from an online
YouTube series: "Java (Beginner) Programming Tutorials." Soon after I started becoming
interested in <strong>Websites 
and Web Design</strong>, so I learned how to create websites with XHTML, but it was not at 
all responsive and was bare to the bone.
                        <br>
                        <br>
                        From then a learned quite a few more languages such as Jquery,
PHP, Javascript, C#, Ajax, etc, and I plan to learn Android Development as my next stage.

                        <br>
                        <br>

                        <a target="_blank"class="btn btn-default" href="Ashpan_Raskar.pdf" role="button">Check out my Resume!</a>
                    </div>

非常感谢任何帮助，我的代码在 GitHub 上，你可以在这里看到它https://github.com/Ashpanr/Personal-Website-v1/ 在此先感谢

Answer 1

80 - 81 的 index.html 行中有错误：

<a name="Portfolio">
<!-- <section id="Portfolio"> -->

改成：

<section id="Portfolio">

而且效果很好。其背后的原因是，<a> 你已经给出并且没有结束标签。在93 行有一个</section>，但没有起始标签。此外，使用<element id="section-name"> 比提供弃用 <a name="section-name"> 更好。一个主要原因是，inline <a> 元素中不能有 block 元素。就是说，你不能在<a> 标签内有<div> 或任何其他块级标签。

但真正的原因是……

您有以下 CSS：

#introbg {position: absolute;}

这并没有告诉浏览器它在哪里结束。你不应该无缘无故地使用position: absolute。因此，稍后出现的<a name="Portfolio"> 获得了#intro 之前的位置。

删除代码的position: absolute，它将正常工作。