I am building a page with anchor links on the left div and pretty long content on the right.
The idea was that the right div with lots of contents would have a vertical overflow scroll set up and when a viewer clicks on an anchor link on the left, the right div with overflow scroll will scroll to the correlating section.
I just cannot figure out how to set this up.
Also, another thing I want to do is when the user is viewing a section, the correlating link will highlight, and when the viewer scrolls down enough to move on to another section, the link for the new section will highlight instead of the previous link.
I’ve been pulling my hair out trying to find a way to set this up.
It would be appreciated if you can help!
Create sections for each of the content areas you want to link to.
In the left div, create buttons or links that correspond to each of the sections.
Give each of the sections and the links a unique class name.
Add the following JavaScript code to the “Custom Code” section of your Webflow project:
// Get all of the section elements
const sections = document.querySelectorAll('.section');
// Get all of the link elements
const links = document.querySelectorAll('.link');
// Function to handle link clicks
const handleClick = (e) => {
// Get the section that corresponds to the link that was clicked
const section = document.querySelector(e.target.hash);
// Scroll to the section
section.scrollIntoView({ behavior: 'smooth' });
};
// Attach a click event listener to each link
links.forEach((link) => {
link.addEventListener('click', handleClick);
});
// Function to handle scroll events
const handleScroll = () => {
// Get the current scroll position
const scrollPos = window.scrollY + window.innerHeight / 2;
// Loop through all of the sections
sections.forEach((section) => {
// Get the top and bottom positions of the section
const top = section.offsetTop;
const bottom = top + section.offsetHeight;
// Check if the scroll position is within the section
if (scrollPos >= top && scrollPos <= bottom) {
// Get the link that corresponds to the section
const link = document.querySelector(`a[href="#${section.id}"]`);
// Add the "active" class to the link
link.classList.add('active');
} else {
// Get the link that corresponds to the section
const link = document.querySelector(`a[href="#${section.id}"]`);
// Remove the "active" class from the link
link.classList.remove('active');
}
});
};
// Attach a scroll event listener to the window
window.addEventListener('scroll', handleScroll);
Finally, add some styles in the “Custom Code” section of your Webflow project to highlight the active link:
.active {
background-color: yellow;
}
This code sets up the functionality for scrolling to the relevant section when an anchor link is clicked, and for highlighting the corresponding link when the user is viewing a section.
Thank you for the reply!
I created sections using separate divs and also created links.
But, I have a few additional questions more specifically about giving unique classes to them.
I assume all sections have to have different classes and all links have to have different classes. Is it correct?
Do the classes have to be named a certain way, or can they be anything as long as they are unique from each other?
Do I have to connect the section and its correlating link by class names somehow, or should I set up the anchor link using ID?
