Is there a way to auto-scroll the page in Webflow after a certain amount of time, without the script automatically scrolling back up if the user has already scrolled past the designated point?

TL;DR
  • Add custom JavaScript in Webflow using an Embed element or Footer code to auto-scroll after a delay.
  • Use setTimeout to delay, check if the user has already scrolled past the target, and scroll smoothly only if they haven't.

You can auto-scroll a Webflow page after a delay using custom code, and it's possible to prevent overriding the user’s manual scroll if they’ve already scrolled past the target point.

1. Delay-Based Auto-Scroll with Scroll Check

  • Embed custom JavaScript in your Webflow project using an Embed element or via Project Settings > Custom Code > Footer.
  • Use setTimeout for the delay, and before scrolling, check the user’s current scroll position.
  • Only scroll if the current scroll position is less than the target section's offset.

2. Sample Script Logic (without raw code)

  • After X seconds (e.g., 5 seconds), get the vertical position of the section you want to scroll to using JavaScript's getBoundingClientRect() or offsetTop.
  • Check window.scrollY (or document.documentElement.scrollTop) to determine how far the user has already scrolled.
  • If the scroll position is below the section, do nothing.
  • Otherwise, use window.scrollTo({ top: value, behavior: 'smooth' }) to scroll smoothly.

3. Where to Place the Code

  • Go to your Webflow page, add an Embed component just before the closing </body> tag or use Project Settings > Custom Code > Footer to insert the script site-wide.
  • Make sure you wrap the script in window.onload or DOMContentLoaded to wait for the page to fully load.

4. Things to Consider

  • Auto-scroll should be used sparingly to avoid disorienting users.
  • Test for mobile responsiveness—some mobile browsers may restrict or delay scrolling behavior.
  • Avoid triggering the scroll too quickly; a 3–5 second delay gives users time to take initial actions.

Summary

To auto-scroll a Webflow page after a set time without interrupting the user, add a custom script that waits, checks the user’s scroll position, and only scrolls if they haven’t scrolled past the trigger zone. Use setTimeout combined with window.scrollY and window.scrollTo() logic within your custom code.

Rate this answer

Other Webflow Questions