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

Question

This is my HTML for my Navbar buttons

<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>

So when I click the portfolio button, it should jump to the portfolio section: this one

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

            </div>
            </a>

But instead it jumps/scrolls to this section

<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>

Any help is really appreciated, my code is on GitHub, you can see it here https://github.com/Ashpanr/Personal-Website-v1/ Thanks in advance

Answer 1

You have an error in Lines 80 - 81 of index.html:

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

Change it to:

<section id="Portfolio">

And it works well. The reason behind it is, <a> you have given and there's no closing tag. There's a </section> at line 93 but no starting tag. And moreover, it is better to use <element id="section-name"> than giving the deprecated <a name="section-name">. A major reason is, you cannot have block elements inside inline <a> element. It is that, simply, you cannot have <div> or any other block level tags inside <a> tag.

But the real reason is...

You have the following CSS:

#introbg {position: absolute;}

And this doesn't tell the browser, where it finishes. You should not use position: absolute without a reason. And so, the <a name="Portfolio">, which comes later gets the position before #intro.

Remove the position: absolute for the code and it will work correctly.