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)

Jess

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.

2 Likes

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

2 Likes

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:

<script>
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) });
});
</script>

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!