Unable to scroll on page via reusable header

[dj0009]

I have a reusable header menu that needs has buttons/links that and I need them to scroll them to a particular element when at the home page/ index.

I have tried many different ways but I can’t seem to get this done. Can anyone help?

[gindele91]

Hi @dj0009 - the way i do this is via a parameter in the url.

So when the user clicks on the specififc button a parameter (for example “scroll_position=group_to_show”) is appended to the home url and opens it. On the index site I create a workflow that runs when page is loaded and the parameter “scroll_position” is not empty and then scroll to the group I want to show.

You could also handle this via a state in the header when the user is already on index I guess and on the index site create a workflow “when condition is true” and the condition reusable_headers scroll_position=scroll_to_group and then scroll to the group.

Hope this helps,
Chris

[boston85719]

Hi Chris

I came across this thread looking for a way to scroll to a page position. Bubble provides the ability to get the page position value, but it seems the built in scroll to workflow event is only available for use with elements position and not the page position.

Do you know how to scroll to a certain page position using a numeric value?

I have a menu that I use some HTML to stop page scroll when the menu is shown.

#page{ position: fixed !important; }

The problem with it though is that I have the menu in a floating group. When the user is scrolling a page and decide to open the menu from the floating group, the page stops scrolling, but it scrolls to the top. Once the menu is closed and the page can once again be scrolled, the page position is at the top of page.

I am trying to figure a way to get the page to scroll back to the position the user was at when they opened the menu. I put a workflow event together to store the page scroll position, but don’t know how to scroll the page back to that position.

Any ideas?

[gindele91]

Hi @boston85719

Have you already tried custom JS Code like: “window.scrollTo(horizontal_position, vertical_position);”?

BR
Chris

[boston85719]

I have not.

how would that look in practice using a JS workflow event when ‘run javascript’ is the workflow event.

When I use that the only things I know how to do is set up CSS in the javascript

I start my script with this

$(document).ready(function(){

But really have no idea how I would structure the code you mentioned

[gindele91]

You can use the toolbox plugin (https://bubble.io/plugin/toolbox-1488796042609x768734193128308700) and then choose the workflow “run javascript” under plugins.

Then use the snippet for example window.scrollTo(0, 0); to scroll to the top of the page:

I think you can save the current scrolling position and then later run javascript window.scrollTo(0, “saved_scrolling _position”) to scroll to the desired position.

BR,
Chris

[gindele91]

Btw. you can also use “window.scrollTo({ top: 0, behavior: ‘smooth’ })” to add a scroll effect

[boston85719]

This worked. Thank you very much. Makes my menu function much better.