Hi, does anyone know if there is an easy way to make “Scroll to specific element” feature?
For example, if I click a button on top of page, I want to get moved to some element in the middle of page.
I tried just changing HTML ( put a href=#id on the button) but it seems that the transition is not smooth.
I saw the thread below and writing custom js code is only way?
Hello, I think what you’re looking for is the smooth scroll behavior.
For anyone looking for a more flexible (can apply to anything - not just a button) solution, I’ve by pure chance been solving this issue for a partner of mine, whom I consult their issues 1:1 with.
You can create a workflow, that will let you not only scroll to a given #id but also define where the scroll should be positioned.
Step 1. You need to create a Global Workflow, where you set a JavaScript action as follows:
// Bring in the parameters
const _position = context.parameters['position']
const _id = context.parameters['id']
// Get the Document and the target
const _document = wwLib.getFrontDocument();
const _target = _document.getElementById(_id)
// Scroll the target into view with our parameters
_target.scrollIntoView({ block: _position });
Step 2. Set up the variables, exactly as I named them (otherwise you’ll need to re-bind them)
| Property name | |
| position (text) | can assume the values of start, end, center |
| id (text) | here you simply input the id of your element |
Step 3. Invoke the workflow on whatever action you need
thanks for the detailed answer. that was super helpful!!
I was wondering if there is any simple way to make with weweb built-in feature but this js code is not that complicated so will give it a try. Thanks a lot!
