# Easy way to make "Scroll to specific element" feature?

**URL:** <https://community.weweb.io/t/easy-way-to-make-scroll-to-specific-element-feature/10202>\
**Category:** Ask us anything\
**Created:** [August 12, 2024, 9:49am UTC](https://community.weweb.io/t/easy-way-to-make-scroll-to-specific-element-feature/10202 "2024-08-12T09:49:46Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [August 12, 2024, 3:13pm UTC](https://community.weweb.io/t/easy-way-to-make-scroll-to-specific-element-feature/10202/2 "2024-08-12T15:13:39Z")

</div>

Hello, I think what you’re looking for is the smooth scroll behavior.

> **[W3Schools.com](https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

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.](https://broberto.sk/consult)

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:

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/4f693baa8c927407b4fb1b28f5ef12d54898f4e7.png)

```auto
// 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

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/86e93b8c590e9420505e94f906677a2a3b9b6d5a.png)

---

_[View the full topic](https://community.weweb.io/t/easy-way-to-make-scroll-to-specific-element-feature/10202)._