Customize Webflow Anchor Scrolling Behavior/Speed

Community resources Webflow Tips
6

@matthew1818, I just added a new parameter that you can set on your elements to control the scroll speed. Just add a custom attribute. Here are some example values:

  • data-scroll-time = 0 will scroll immediately to the element with no delay.
  • data-scroll-time = 0.75 will scroll a little faster than the default
  • data-scroll-time = 1 will scroll just as fast as usual
  • data-scroll-time = 1.25 will scroll a little slower than the default
  • data-scroll-time = 2 will scroll twice as slow as usual
  • data-scroll-time = 20 will enable TurtleMode™ :smiley:

You can set the data-scroll-time attribute on your body tag, in which case it will affect all scroll operations on that page. You can also set it on individual elements that you’re scrolling to (so you can have one default scroll speed for all links on the page, with a specific override for one or more individual elements).

I’ll put together a more comprehensive smooth scroll tutorial soon, but in the meantime give it a shot and let me know if you have any trouble with the settings.

19 Likes