Question

这是我的Navbar按钮的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>你已经给出了并且没有结束标记。第</section>行有93但没有起始标记。此外，最好使用<element id="section-name">而不是已弃用 <a name="section-name">。一个主要原因是，block inline元素中不能包含<a>个元素。简而言之，您不能在<div>标记内包含<a>或任何其他块级别标记。

但真正的原因是......

您有以下CSS：

#introbg {position: absolute;}

这并不能告诉浏览器它完成的位置。没有理由你不应该使用position: absolute。因此，稍后出现的<a name="Portfolio">会获得#intro之前的位置。

删除代码的position: absolute，它将正常运行。

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

1 个答案: