# WAIT: Table of Contents (ToC) scroll offset incorrect when using "Smooth Scroll (CSS)"

**URL:** <https://forum.bricksbuilder.io/t/wait-table-of-contents-toc-scroll-offset-incorrect-when-using-smooth-scroll-css/38614>\
**Category:** Bugs\
**Tags:** v2-2\
**Created:** [March 20, 2026, 8:33pm UTC](https://forum.bricksbuilder.io/t/wait-table-of-contents-toc-scroll-offset-incorrect-when-using-smooth-scroll-css/38614 "2026-03-20T20:33:03Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Borlabs-Ben](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/borlabs-ben/32/32022_2.png) [@Borlabs-Ben](https://forum.bricksbuilder.io/u/Borlabs-Ben)\
**Post date:** [March 20, 2026, 8:33pm UTC](https://forum.bricksbuilder.io/t/wait-table-of-contents-toc-scroll-offset-incorrect-when-using-smooth-scroll-css/38614/1 "2026-03-20T20:33:04Z")

</div>

**Browser** : Chrome 110  
**OS** : macOS  
**URL** : Not Public  
**Video** : [BorlabsScreenshot-2026-03-20-at-21-29-54](https://screenshot.borlabs.io/b6hLvmWM)

When the “**Smooth Scroll (CSS)**” option is enabled in Bricks settings, the scroll position for Table of Contents links is incorrect if a heading offset is defined.

## Steps to reproduce:

1. Go to Bricks settings and enable “**Smooth Scroll (CSS)**”
2. Add a Table of Contents element
3. Set “**Headings offset (px)**” to a value (e.g. **64** )
4. Click on any link in the Table of Contents

## Expected behavior:

The page should scroll to the correct heading, taking the defined offset (e.g. 64px) into account.

## Actual behavior:

The scroll position is incorrect and does not respect the configured heading offset.

## Notes:

The issue appears to be related to how CSS-based smooth scrolling handles offset values. If “**Smooth Scroll (CSS)**” is disabled, it works as intended.

---

<div class="post-metadata">

**Author:** ![timmse](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/timmse/32/1192_2.png) [@timmse](https://forum.bricksbuilder.io/u/timmse)\
**Post date:** [March 23, 2026, 9:49am UTC](https://forum.bricksbuilder.io/t/wait-table-of-contents-toc-scroll-offset-incorrect-when-using-smooth-scroll-css/38614/2 "2026-03-23T09:49:21Z")

</div>

Hi Ben,  
Thanks so much for your report!

The problem sounds similar to these:

> [@DUPLICATE: "Smooth scroll (CSS)" setting enabled causing inconsistent scrolling with Tabs (nestable) and Table of contents elements](https://forum.bricksbuilder.io/t/duplicate-smooth-scroll-css-setting-enabled-causing-inconsistent-scrolling-with-tabs-nestable-and-table-of-contents-elements/32418):
>
> Browser: Firefox 138.0.1 and Chrome 136 OS: Windows (10) for sure (macOS, tentatively). Likely across all platforms I’ve noticed very odd scrolling behavior with both the Tabs (nestable) when using direct links to the tabs, as well as the Table of contents element. I have a sticky top nav bar. The footer is pushed to the bottom so that there is always a scrollbar and no layout shifts if the page doesn’t have enough content, vertically. The navigation and scrolling behavior seems different depe…

> [@WIP: Table of contents Element: Highlighting does not work with position: relative](https://forum.bricksbuilder.io/t/wip-table-of-contents-element-highlighting-does-not-work-with-position-relative/25487):
>
> Browser: FF 114.15.0, Safari 16.6.1 OS: macOS When using the native ToC element, everything works fine except for assigning the active state to the current element. I found out that it has something to do with relatively positioned containers that contain my headings. Any heading inside a container that is ralatively positioned is not highlighted in the ToC, except the last one. Is this behavior intentional, or does anyone have a workaround for me?

Could you check if you have any relative wrappers that might affect the scrolling position (as described in the mentioned threads), or provide a link or login credentials (via email)?

Best regards,  
timmse

---

<div class="post-metadata">

**Author:** ![Borlabs-Ben](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/borlabs-ben/32/32022_2.png) [@Borlabs-Ben](https://forum.bricksbuilder.io/u/Borlabs-Ben)\
**Post date:** [March 23, 2026, 10:25am UTC](https://forum.bricksbuilder.io/t/wait-table-of-contents-toc-scroll-offset-incorrect-when-using-smooth-scroll-css/38614/3 "2026-03-23T10:25:21Z")

</div>

The page uses a **`<header>`** with **position:sticky** , **`<main>`** and **`<footer>`** with **position:relative**.

I tested removing **position:sticky** from the header and changing **position:relative** to **position:static** on both and via the browser’s developer tools. However, the issue still persists, so it does not seem to be directly caused by these positioning rules.

This behavior is consistent with the issue observed on the following page: [Terms Of Service](https://dataclay.com/legal/terms-of-service/) ( [DUPLICATE: "Smooth scroll (CSS)" setting enabled causing inconsistent scrolling with Tabs (nestable) and Table of contents elements](https://forum.bricksbuilder.io/t/duplicate-smooth-scroll-css-setting-enabled-causing-inconsistent-scrolling-with-tabs-nestable-and-table-of-contents-elements/32418) )

While investigating, I came across a potentially related issue in the tocbot ( [Tocbot](https://tscanlin.github.io/tocbot/#options) ) documentation:

> // CAUTION: Doesn’t work well of you already have scroll-behavior set to smooth globally in your CSS - see [Flash when scrolling / doesn't scroll to right spot · Issue #273 · tscanlin/tocbot · GitHub](https://github.com/tscanlin/tocbot/issues/273#issuecomment-2916799033)  
> scrollSmooth: true,

---

<div class="post-metadata">

**Author:** ![timmse](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/timmse/32/1192_2.png) [@timmse](https://forum.bricksbuilder.io/u/timmse)\
**Post date:** [March 23, 2026, 11:15am UTC](https://forum.bricksbuilder.io/t/wait-table-of-contents-toc-scroll-offset-incorrect-when-using-smooth-scroll-css/38614/4 "2026-03-23T11:15:11Z")

</div>

> [@Borlabs-Ben](#):
>
> While investigating, I came across a potentially related issue in the tocbot

That’s a great tip! Please add the following CSS to Bricks » Settings » Custom Code » Custom CSS or to Theme Styles » Stylesheet:

```auto
html:has([data-smooth-scroll="1"]) {
  scroll-behavior: auto;
}

```

This checks whether a `data-smooth-scroll="1"` attribute exists anywhere in the HTML (it does—in the toc element) and, if so, resets the CSS smooth scroll to `auto` to prevent it from conflicting with the toc JavaScript smooth scroll.

---

<div class="post-metadata">

**Author:** ![Borlabs-Ben](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/borlabs-ben/32/32022_2.png) [@Borlabs-Ben](https://forum.bricksbuilder.io/u/Borlabs-Ben)\
**Post date:** [March 23, 2026, 11:21am UTC](https://forum.bricksbuilder.io/t/wait-table-of-contents-toc-scroll-offset-incorrect-when-using-smooth-scroll-css/38614/5 "2026-03-23T11:21:37Z")

</div>

What a great start to the week! This works perfectly, thank you so much.

---

<div class="post-metadata">

**Author:** ![timmse](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/timmse/32/1192_2.png) [@timmse](https://forum.bricksbuilder.io/u/timmse)\
**Post date:** [March 23, 2026, 11:31am UTC](https://forum.bricksbuilder.io/t/wait-table-of-contents-toc-scroll-offset-incorrect-when-using-smooth-scroll-css/38614/6 "2026-03-23T11:31:26Z")

</div>

That’s right, it couldn’t go much better 😃  
I’m really glad the solution works. I’ll suggest this in the other thread(s) as well—as far as I can see, there’s no reason not to implement it natively.

---

<div class="post-metadata">

**Author:** ![benjamin](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/benjamin/32/1848_2.png) [@benjamin](https://forum.bricksbuilder.io/u/benjamin)\
**Post date:** [March 24, 2026, 4:17pm UTC](https://forum.bricksbuilder.io/t/wait-table-of-contents-toc-scroll-offset-incorrect-when-using-smooth-scroll-css/38614/7 "2026-03-24T16:17:16Z")

</div>

Hi timmse,

actually my post was regarding another problem, namely the highlighting of the ToC links. The state class »is-active-li« doesn’t get assigned if the container element of the targeted Headline is set to position:relative. Please check if you can reproduce this behavior.

The scrolling position of the content is working fine in my case.

Kind regards,  
Benjamin

---

<div class="post-metadata">

**Author:** ![timmse](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/timmse/32/1192_2.png) [@timmse](https://forum.bricksbuilder.io/u/timmse)\
**Post date:** [March 24, 2026, 4:28pm UTC](https://forum.bricksbuilder.io/t/wait-table-of-contents-toc-scroll-offset-incorrect-when-using-smooth-scroll-css/38614/8 "2026-03-24T16:28:58Z")

</div>

Hi @benjamin,  
I know what [your report](https://forum.bricksbuilder.io/t/wip-table-of-contents-element-highlighting-does-not-work-with-position-relative/25487) was (and still is) about, and Matej confirmed it back then—but it doesn’t hurt to ask, since the problem could be related.

But if that’s not the case: no problem 🙂 I’m sorry we haven’t been able to resolve your issue yet.