If a heading hides under a fixed header after you select a table of contents item, enter the header height in pixels in "Scroll Offset" under "Customize the table of contents." If selecting an item does not move to the heading, check that the item text matches the heading text in the body.
Fixed header: Check whether the online store header stays at the top of the screen after scrolling. If a heading hides under it, adjust "Scroll Offset."
Scroll offset: Check whether "Scroll Offset" under "Customize the table of contents" is still 0. The default is 0.
Scroll animation: Check that "Enable animation for scroll" is on. The offset is not used when this setting is off.
Heading text: Check that the table of contents item text matches the heading text in the body.
Image loading: Check whether images above the heading use lazy loading.
Cause: If the space from the top of the screen is too small when you move to a heading, the fixed header can cover it. A positive "Scroll Offset" moves the heading's stop position down.
What to do: Enter the fixed header height in pixels in "Scroll Offset," then save.
(1) Open the settings page
In Shopify admin, go to Apps and open "RuffRuff Table of Contents." Select "Settings" from the app menu to open "Customize the table of contents."
(2) Enter the offset and save
Check that "Enable animation for scroll" is on, enter the header height in pixels in "Scroll Offset," then select "Save." For example, if the header is 80px tall, enter 80. The offset is used only when scroll animation is on.
After saving, select a table of contents item on the target storefront page and check that its heading is visible below the fixed header. If the space is too large, reduce the value and save again.
For the list of settings, see Customize the Table of Contents.
Cause: If the table of contents item text does not match the heading text in the body, the ID used to move to the heading is not added. Special spaces in a heading can cause this. The text must match even when "Heading ID Generation" is set to "Numbering ID."
What to do: Delete the heading and type it again. On the updated published page, select its table of contents item and check that it moves to the heading.
Cause: The app cannot fix position shifts caused by lazy-loaded images.
Note: "Scroll Offset" cannot fix position shifts caused by lazy-loaded images.
What to do: Turn off lazy loading, or accept the position shift.
Cause: The theme's own scroll handling can cause the issue. The app's offset setting alone may not fix it.
What to do: Contact us through the contact form. We may ask for access to your store to investigate.
If the checks above do not solve the issue, contact us through the contact form.
Include the following information:
The store's myshopify.com domain
The target page URL
The theme name
The items you have already checked