How to deal with the sticky feature automatic scroll to a section?

Ask us anything How do I?
1

Hello,

The issue I have is how to click on the left menu, to have an automatic scroll to the section I am interested in on the right. (section on the right is in sticky mode in a tab)

image
image1538×1258 104 KB

@jptrinh any idea?

2

Hey @Davy :wave:
If you content on the right are not Sections, I think the only way to do that would be with custom JS.
First, you’d need to add IDs to each of your sections. Then, set a workflow onClick on your menu item. This would trigger a custom JS that can take the id you are targeting, calculate the its Y position on the page, and scroll to it (make it as a Global workflow with parameters for easy setup)

const element = wwLib.getFrontDocument().getElementById('element-id');
const elementPosition = element.getBoundingClientRect().top;

wwLib.getFrontWindow().scrollTo({
    top: elementPosition,
    behavior: "smooth"
});

Hope that helps :slight_smile:

3

Thanks a lot, it does help, but right now I can see that I am taken to the top of the section, but the section has been scrolled up, so it’s not visible

Should it be the contrary? If I click on the CTA then back to a static position?

In this case what would the approach be? Sorry not familiar with code. (my column unique ID is “Column”, and “step1” the ID of my first step

4

Problem solved using this code :

// Get references to the container and the target element
const container = wwLib.getFrontDocument().getElementById("leftColumn").parentNode;
const access = wwLib.getFrontDocument().getElementById("step1");

// Ensure both elements are available
if (container && access) {
    // Target Y position to scroll to
    const targetYPosition = 0;

    // Scroll to the target Y position smoothly without retrying
    container.scrollTo({ top: targetYPosition, behavior: "smooth" });
}

return;

Leftcolumn is the name of my component my scrolable component was included in.
step1 : the name of my component I need to scroll automatically
targetYPosition : the position where I wanted my component to be. For the first one it was at the top so 0 worked, for the others I had to adjust the number based on the length of the block.

Probably not the most optimized but it does the job for now.