Jump / Anchor Links

Hi everyone! Hopefully this is a simple question!

I want to make site like this: https://purpleorangepr.com/

Is it possible to add active/hover states to anchor links? (like how it’s orange when you’re scrolling through that section on the site)


1 Like

You use ScrollSpy for doing this,

Its built into Bootstrap, and can be implemented into Blocs.

It’s on my list of tutorials to make actually.


Ok, thank you, as always! @Malachiman - I’m just starting on this project. I think I’m going to start a new thread on this topic because I have some further somewhat related questions.

I did a video on integrating ScrollSpy into Blocs a couple of weeks back.

You can view it here


Awesome @Malachiman !! I will check it out as I am very new to coding.

@Malachiman - I just wanted to let you know, it worked for me!!

1 Like

@Malachiman - I just wanted to let you know, I found one little issue with the solution shown in your video, I think.

I created a video that shows the problem! https://youtu.be/AR-YcRoBOM4

As you can see, the nav doesn’t flip over until about 1/3 of the way through the bloc with small-large padding. I think this is because the nav is covering it up.

I took at look at your code:

window.addEventListener('load', (event) => {
  var scrollarea = document.getElementsByTagName('body')[0];
  scrollarea.setAttribute('data-spy', 'scroll');
  scrollarea.setAttribute('data-target', '.site-navigation');

  var navHeight = document.getElementById('top-nav').offsetHeight;

  $('body').scrollspy({ target: '.site-navigation', offset:(navHeight) });

Does the “navHeight” somehow need to be adjusted to say a certain amount of pixels? I’m not quite sure. I am trying to learn code as I think I need it, but I’m a beginnner.

I take it you didn’t set the ID of your navbar. Going from memory I did mention it in the video.

This sets the pixel offset to the Navbar. You can also add additional pixels to that based on your design. But I don’t cover that in the video.

Eg. See this bit

Ah, that could be it! I will double check.

@Malachiman Yes, you are right! I must have missed it originally! That resolved the problem. Thank you as always!! You are truly a Blocs expert. Wish I could code like you!