HTML link scroll down the page

Question

     <div class="menu right-float clearfix">
  <nav id="main-nav">
    <ul>
     <li class="current-menu-item"><a href="#home" class="scroll-to">Home</a></li>
     <li><a href="#gaelic" class="scroll-to">Gaelic Sports</a></li>
     <li><a href="#soccer" class="scroll-to">Soccer</a></li>
     <li><a href="#cricket" class="scroll-to">India Cricket</a></li>
     <li><a href="#contact" class="scroll-to">Contact</a></li>
      <li><a href="#basket" class="scroll-to">BasketBall</a></li>
   </ul>
 </nav>
 <nav id="menu-controls">
  <ul>
   <li class="current-menu-item"><a href="#home" class="scroll-to"><span class="c-dot"></span><span class="c-name">Home</span></a></li>
   <li><a href="#gaelic" class="scroll-to"><span class="c-dot"></span><span class="c-name">Gaelic Sports</span></a></li>
   <li><a href="#soccer" class="scroll-to"><span class="c-dot"></span><span class="c-name">Soccer</span></a></li>
   <li><a href="#cricket" class="scroll-to"><span class="c-dot"></span><span class="c-name">India Cricket</span></a></li>
   <li><a href="#contact" class="scroll-to"><span class="c-dot"></span><span class="c-name">Contact</span></a></li>
   <li><a href="#basket" class="scroll-to"><span class="c-dot"></span><span class="c-name">BasketBall</span></a></li>

 </ul>

I have a question about HTML links. I added the last line in the code shown above. If I click on the Soccer link, the page will scroll down to the bottom and will show me the soccer information. I want to click Basketball link and have it scroll down and show me the basketball page. I am updating the index file. Is there any good solution? Thanks.

Answer 1

You can certainly add <a href="#basketball"></a> just like the previous one.

Answer 2

You need to put the anchor in at the destination.

For all of the working links, you will probably see a id="gaelic" on a tag, you need to add one of these for basketball.