javascriptnavonscroll

Navigate to the next/previous anchor point onScroll with JS

On my page, I have navigation that scroll to anchor points on click. But I want to go up and down to these anchors on Scroll (depend on the direction of scrolling).
Code is my navigation:

<div id="top-menu" class="verticalNav textCenter">

<ul class="bg-dark-transparent">
  <li><a id="scroll1" class="liColor noTextDecoration sideMenu" href="#introduction">Intro</a></li>

  <li><a id="scroll2" class="liColor noTextDecoration sideMenu" href="#overview">Overview</a></li>

  <li><a id="scroll3" class="liColor noTextDecoration sideMenu" href="#process">Process</a></li>

  <li><a id="scroll4" class="liColor noTextDecoration sideMenu" href="#research">Research</a></li>

  <li><a id="scroll5" class="liColor noTextDecoration sideMenu" href="#analysis">Analysis</a></li>

  <li><a id="scroll6" class="liColor noTextDecoration sideMenu" href="#ideation">Ideation</a></li>

  <li><a id="scroll7" class="liColor noTextDecoration sideMenu" href="#prototype">Prototype</a></li>

  <li><a id="scroll8" class="liColor noTextDecoration sideMenu" href="#testing">Testing</a></li>

  <li><a id="scroll9" class="liColor noTextDecoration sideMenu" href="#result">Result</a></li>
</ul>
Solution

  • Refer to this link

    Then inside of the if checks you would jump to the anchors using window.location.href = ‘webpage\#anchor’;

    You will probably want to store the names of you anchors in an array or object to loop through and keep track of the current anchor.

    If you need help with that as well I can help also. If this is a solution for your problem!