Navigate to the next/previous anchor point onScroll with JS

Question

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>

Can you post of an example of what you have tried to accomplish this? — Jaxon Crosmas, Jul 22 '22 at 23:41

score 0 · Accepted Answer · answered Jul 23 '22 at 00:36

0

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!

answered Jul 23 '22 at 00:36

JustBarnt

104
9

Yes, please! I think it should work for me. – SJ War Jul 23 '22 at 01:01
I don’t your full experience with javascript is, but the least complicated route would be to manual create an array `const anchorArray = [‘#anchor1’];` `let currentAnchor = -1;` During your scroll event either increment or decrement your scroll index to keep track of which anchor is next Then your jump to anchor would look like `window.location.href = \`www.website.com/${anchorArray[currentAnchor]}\`;` – JustBarnt Jul 23 '22 at 01:14
Better yet here's a [codepen](https://codepen.io/justbarnt/pen/xxWrpvv?editors=1010) – JustBarnt Jul 23 '22 at 01:22

Navigate to the next/previous anchor point onScroll with JS

1 Answers1