how to link to anchor tag in different section

Question

this is my code in two ways in (li)s and yet neither are working:

<ul class="submenuItems">
          <li><a href="index.html#ourpurpose">Our Purpose</a></li>
          <li><a href="#scope">Scope</a></li>

and for the target this is the code :

<h1 id="ourpurpose">Our Purpose<h1>
...
<h1 id="scope">Scope</h1>

i want to link it knowing that both are in the same <section> in a parallax page but separated by images and divs.

Answer 1

Using #scope and #ourpurpose is right, in this case you need to add section (You can also can use div)

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
}

section {
    width: 100%;
    height: 100%;
    background: red;
}

.topics {
    background: blue;
    color: white;
}

<ul class="submenuItems">
  <li><a href="#ourpurpose">Our Purpose</a></li>
  <li><a href="#scope">Scope</a></li>
</ul>

<section id="ourpurpose-section">
<h2>ourpurpose</h2>
<div class="topics" id="ourpurpose"> I am topics</div>
<p>Some Text</p>
<div class="images"><!-- Some images --></div>
</section>
<section id="scope-section">
<h2>scope</h2>
<div class="topics" id="scope">topics</div>
<p>Some Text</p>
<div class="images"><!-- Some images --></div>
</section>
<section></section>