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

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>

而是改为jumps/scrolls到这个部分

<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

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

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

改为：

<section id="Portfolio">

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

但真正的原因是...

您有以下 CSS：

#introbg {position: absolute;}

并且这不会告诉浏览器它在哪里结束。你不应该无缘无故地使用 position: absolute。所以，后面的 <a name="Portfolio"> 得到了 #intro.

之前的位置

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

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

One of my website's navbar button is not jumping to the correct section of the screen

html

javascript

css

twitter-bootstrap

anchor-scroll