How to Create an Active Dot for Anchor Links in Webflow

If you have ever wanted to add an active dot that follows along with your active anchor links as you scroll through your page in Webflow, you've come to the right place. This tutorial will walk you through adding a dot next to the active anchor link in Webflow. We will be using custom JavaScript to achieve this effect, as it's not possible natively in Webflow.

Setting Up the Page Structure in Webflow

Before diving into the JavaScript part, let's first set up the page structure in Webflow.

Anchor Links and Sections

1. Create a section for each part of your page that you want to link to.
2. Add an ID to each section to create a target for your anchor links.

Setting up Anchor Links

Next, set up your anchor links.

1. Create the anchor links on your page, linking them to the respective sections created earlier.
2. Ensure that the anchor links scroll smoothly to the targeted sections when clicked.

Defining classes in Webflow

Now, let's set up the classes needed for the active dot effect.

CSS Classes

hack41-link Class

Create a class called "hack41-link" for each of the anchor links. This will serve as the identifier for the active dot.

hack41-dot Class

Create a class called "hack41-dot" for the dot element that will be displayed next to the active anchor link.

hack41-dot-off Class

Create a class called "hack41-dot-off" in Webflow, which will initially set the dot's display property to "none."

By setting up these classes, we can then use custom JavaScript to manipulate the display of the dot based on the active state of the anchor links.

Implementing the Custom JavaScript

To add the custom JavaScript for creating the active dot effect, follow these steps:

1. Go to the "Custom Code" section in the Project Settings of your Webflow project.

2. Insert the JavaScript code shown below just before the closing body tag.

<script>       // Setting up the Mutation Observer     var observer = new MutationObserver(function() {        var links = document.querySelectorAll('.hack41-link');        links.forEach(link => {            if(link.classList.contains('w--current')) {                link.querySelector('.hack41-dot').classList.add('hack41-dot-off');            } else {                link.querySelector('.hack41-dot').classList.remove('hack41-dot-off');            }        });    });    // Configuring the Mutation Observer    var config = { attributes: true, attributeFilter: ['class'] };    links.forEach(link => {        observer.observe(link, config);    });</script>

Understanding the JavaScript

Mutation Observers

The script utilizes the Mutation Observer API to track changes to the classes of the anchor links and then add or remove the dot based on the active state.

Using Mutation Observer

With this script, a Mutation Observer is set up to watch for changes in the 'class' attribute of the anchor links with the class '.hack41-link'. Upon detecting a change, the observer will check if the 'w--current' class is present. If it is, it will add the 'hack41-dot-off' class to the corresponding dot element. If the 'w--current' class is absent, it will remove the 'hack41-dot-off' class from the dot.

Document Query Selector

The document.querySelectorAll('.hack41-link') statement selects all the elements with the class ‘hack41-link’, which represent the anchor links being observed.

Sharing Variables

The variable links is used to store the selected anchor links, and the forEach loop iterates through each link to add or remove the 'hack41-dot-off' class based on the active state.

How it Works

When the user scrolls the page, triggering the active state of an anchor link, the Mutation Observer reacts to the change in the class attribute and manipulates the corresponding dot's display property to create the active dot effect.

Customizing the JavaScript

You can customize this JavaScript to suit your specific requirements. For example, you might want to change the class names or add additional functionality to the active dot effect.

Conclusion

By following this tutorial, you have learned how to add an active dot next to anchor links in Webflow using custom JavaScript. This creates a visually appealing and user-friendly navigation experience for your website visitors. Experiment with this technique and tailor it to your specific design needs. Happy designing in Webflow!

Remember to test your site thoroughly after making these changes on both desktop and mobile devices. If you encounter any issues or have further questions, don’t hesitate to reach out to the Webflow community or support team for assistance.