[SOLVED] Anchor link from reusable element (header)

Need help
1

Hello!

First post for me but I’ve read a lot of useful answers from the awesome bubble community before.

Couldn’t quite find any solution for the problem I’m having tight now so here it goes…

I have a floating header which is a reusable element and I want links/buttons on this header to scroll the view to specific parts on the main page. Can this be done? Seems like it absolutely should be able to do but it might involve using custom states from reusable elements? Worst case I could just scroll to a fixed place with the offset pixel option in the scroll to event. That wouldn’t be great when switching between desktop and mobile though…

Please help!

2

Edit:

I missed the “reusable element” part. What I typed did not work from a reusable element, so I erased it.

3

According to Emmanuel, it can’t be done:

What you can do though is link to the page that contains the element you want to scroll to and pass the name of the element as a parameter. Then on page load, scroll to the element if the url contains the said parameter and value, if that makes sense.

5 Likes
4

Oh, ok…Too bad. And you would think that the scenario is be a pretty common usage case.

Well, I will try that page parameter work around and hope that it doesn’t take too long to reload the page. Thanks a bunch!!

Such an awesome community!

5

That worked alot better than expected! Thanks a bunch!!

I thought I would see that the page went blank for a mikro sec then went on to scroll but you couldn’t notice anything like that, just scrolled right away.

6

Hi @claes.nyborg,

I don’t know about 2016 bubble features, but would this be what you are seeking for? https://yamedia.bubbleapps.io/version-test/dbmenu_page1
It’s actually dynamic - menu items depend on the page you are visiting. No plugins, just bubble features + database. I guess it could be made static for all pages, under certain conditions without db, but never tried.

1 Like
7

Absolutely, and I think I solved it like you have done. With navigating to page with a parameter/path?

8

In this solution I don’t navigate to pages with #id at the end nor I pass any parameters.

I put directly #ids as the links. On top of that they are taken from database depending on the current page, so I can build dynamic menus and have different (or same) #ids for elements across pages. Also I can jump to elements on the page, go to external page, jump to element on the external page. As all normal links can :slight_smile:

The only requirement is to expose ID of elements in settings and actually name your elements. Drawback: no scroll, just jump. But that could be added with some javascript if really needed.

2 Likes
9

Hi, would you be so kind to show an example ?
I exposed the element ID from general settings but I’m unable to figure out how to link to those element ID.
I’ve already given an ID value to a Text element inside a Popup Element but I can’t understand how to assemble the link towards that Text element.
Thans in advance for your time and help.

10

Hi,
The basic version is:

  1. Expose HTML id in settings (you did)
  2. Add HTML id to some elements (to which you want to jump) on the page, each one different. Lets say one of them is “test”
  3. Your link element: change to external page and as destination put #test - so it is # followed by the HTML id
  4. Done.
3 Likes
11

Straight and clear👍
Just need to try but it sounds feasible for my low level skills. Thanks a lot for your time and kindness, man😀

12

it worked like a charm, so glad !
Thanks a million !
Have a great shining day.
:slight_smile:

13

This topic was automatically closed after 70 days. New replies are no longer allowed.