Anyone figure out "scroll to" as part of workflow?

I’m working on a page where a button press in a potentially long list leads to the display of a form field higher up on the page. I would like to have the button press trigger a “scroll to element” action. Anyone do this successfully on WeWeb?

1 Like

@kyanaloe There are several options. They all involve a bit of Javascript. You can use these in the custom javascript action.

The two that I landed on after much research are these:

OPTION 1:

let e = document.getElementById("submit-content");
        e.scrollIntoView({
          block: 'start',
          behavior: 'smooth',
          inline: 'start'
        });

OPTION 2

const node = document.getElementById("submit-content");
const yourHeight = 120; //This is how far down the page you need the element to scroll to. Relevant primarily if you have a sticky horizontal navigation/header.

node.scrollIntoView(true);

const scrolledY = window.scrollY;

if (scrolledY) {
  window.scroll(0, scrolledY - yourHeight);
}

Option 1 has smooth scrolling. Option 2 is a hard scroll, but option 2 apparently has more cross browser acceptance.

I’m using option 2 in my project.

3 Likes

If you add html{scroll-behavior: smooth;} in your global css you get the smoot scroll behaviour with option 2 as well keeping a high cross browser compatibility

4 Likes

Amazing! Thank you!

1 Like