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

**URL:** <https://community.weweb.io/t/how-to-deal-with-the-sticky-feature-automatic-scroll-to-a-section/10721>\
**Category:** How do I?\
**Created:** [September 9, 2024, 2:05pm UTC](https://community.weweb.io/t/how-to-deal-with-the-sticky-feature-automatic-scroll-to-a-section/10721 "2024-09-09T14:05:57Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Davy](https://avatars.discourse-cdn.com/v4/letter/d/e495f1/32.png) [@Davy](https://community.weweb.io/u/Davy)\
**Post date:** [September 9, 2024, 2:05pm UTC](https://community.weweb.io/t/how-to-deal-with-the-sticky-feature-automatic-scroll-to-a-section/10721/1 "2024-09-09T14:05:57Z")

</div>

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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/547533bc5e7fb529bc502bd0d704bbfb1d2f7a01.png)

https://www.loom.com/embed/546eac16fc9246698d6441ee9492c2bf?sid=5856ef91-7047-419e-820e-7dfe429a926b

@jptrinh any idea?

---

<div class="post-metadata">

**Author:** ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)\
**Post date:** [September 12, 2024, 8:34am UTC](https://community.weweb.io/t/how-to-deal-with-the-sticky-feature-automatic-scroll-to-a-section/10721/2 "2024-09-12T08:34:52Z")

</div>

Hey @Davy 👋  
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)

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

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

```

Hope that helps 🙂

---

<div class="post-metadata">

**Author:** ![Davy](https://avatars.discourse-cdn.com/v4/letter/d/e495f1/32.png) [@Davy](https://community.weweb.io/u/Davy)\
**Post date:** [September 12, 2024, 9:30am UTC](https://community.weweb.io/t/how-to-deal-with-the-sticky-feature-automatic-scroll-to-a-section/10721/3 "2024-09-12T09:30:42Z")

</div>

> [@jptrinh](#):
>
> ```auto
> const element = wwLib.getFrontDocument().getElementById('element-id');
> const elementPosition = element.getBoundingClientRect().top;
> 
> wwLib.getFrontWindow().scrollTo({
> top: elementPosition,
> behavior: "smooth"
> });
> 
> ```

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

https://www.loom.com/embed/e6c853cdb7df4df7b0967113ff03c308

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

---

<div class="post-metadata">

**Author:** ![Davy](https://avatars.discourse-cdn.com/v4/letter/d/e495f1/32.png) [@Davy](https://community.weweb.io/u/Davy)\
**Post date:** [September 13, 2024, 8:41am UTC](https://community.weweb.io/t/how-to-deal-with-the-sticky-feature-automatic-scroll-to-a-section/10721/4 "2024-09-13T08:41:40Z")

</div>

Problem solved using this code :

```auto
// 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.