Highlight active anchor link without using jQuery

Question

I am building a website which only has a single page, but with different sections, for example, Home, About, Contact etc. I am using anchor tags to scroll through the different sections of the page. I have a fixed navigation menu at the top of the page and I would like to indicate IN the navigation links, which section is active at the moment.

I am learning JavaScript at the moment so I am not sure how to do it. I also want to avoid using jQuery.

Does this answer your question https://stackoverflow.com/questions/487073/how-to-check-if-element-is-visible-after-scrolling — Unbranded Manchester, Jun 19 '20 at 08:39

Robbendebiene · Answer 1 · 2020-06-19T09:04:43.747

I would use the hashchange event for this. Whenever it fires update your navigation by adding/removing a class. In the following example the class is called "active".

window.addEventListener("hashchange", updateActiveNavigationEntry);

function updateActiveNavigationEntry () {
  // query currently active item
  const currentActiveItem = document.querySelector('#navigation a.active');
  // remove active class
  if (currentActiveItem) currentActiveItem.classList.remove("active");
  // query new active item
  const newActiveItem = document.querySelector('#navigation a[href="'+ window.location.hash +'"]');
  // add active class to new entry
  if (newActiveItem) newActiveItem.classList.add("active");
}

.active {
  background: red;
}

<div id="navigation">
  <a href="#section01">section01</a>
  <a href="#section02">section02</a>
  <a href="#section03">section03</a>
</div>

Highlight active anchor link without using jQuery

1 Answers1