I need a little bit help about "scroll user to an element on the page". Thanks in advance

[Adelin]

Hello everyone. As i am a new user here on fliplet, let me first introduce myself. I live in Belgium and… as my topic suggest… i am far from being a developper I am a pianist-composer but very passionated by making websites and apps. I’ve made one on fliplet. It looks very nice and works perfectly. As fliplet allows to add custon-code, i’ve tried to “code” some simple features and they all work well. But today i am stuck The description i read in the “fliplet developers” page is a little to short for me and i can’t make that “basic option that i need” work. I hope someone can help me whith this simple thing (for a developer) I wish you all a very nice 2022 !
Here’s my problem : I have a long page containing 15 containers with information in it (text, images, primary buttons etc). Some users scroll down to read the info of all containers… but some are just interested in 1 or 2 and… they have to scroll down the whole list…
So i want to use the option “scroll user to an element” (Fliplet.Page.scrollTo…)
On top of the screen i will therefore put 15 little primary buttons with just the title of the container so the users can select directly that specific container they’re interested in.
Question 1 : what must i write (code)… and where exactly… (before or after the f1-button cid=“1234567”) in the html section to make those buttons clickable ?
Question 2 : what must be written in the js section ? I can see 4 different options on the developer page and i have no idea what i should chose : ```
// Scroll to an element by providing the direct element or jQuery reference
Fliplet.Page.scrollTo($(’#target’))
Fliplet.Page.scrollTo(document.getElementById(‘target’))

// Scroll to an element using a selector string
Fliplet.Page.scrollTo(’[data-id=“123”]’)

// Scroll the element with a specific context
Fliplet.Page.scrollTo(’.title’, { context: ‘[data-entry-id=“456”]’ })
``
Thank you for your help. And sorry for my very bad/basic english (must be hard to read )

[Deb (Deb Ghosh)]

Hi Adelin,

Welcome to the Fliplet Community. Let me see if I can help you.

You will need some JS. You will need to enter this under Developer options > This screen > JS.

//Change Primary Button to the name of your button. For e.g. events
$('[data-name="events"]').click(function() {

/*change the 9920651 below to the cid of your container you want to scroll it to. You can get this from the screen HTML. 
*/
  Fliplet.Page.scrollTo('[data-id="9920651"]');

});

This code will execute a click event on the “events” button and scroll the user to the container with cid 9920651. In your case the cid will be different and correlate to your events container.

Hope this helps,

Thanks,
Deb

[Adelin]

Hello. Thanks for your reply. Do i have to put the whole code only in the JS section ? Nothing to add in the html section next to the “”"“f1-button”""???

And i do this 15 times for my 15 containers and buttons ?

[Deb (Deb Ghosh)]

Yes the whole code in the JS section. Nothing to add in the HTML. Yes you need to recreate this 15 times for your 15 buttons.

[Adelin]

it is not working…
I changed the label of the button to “events” (and left the link action to “none”)
Copied the code in the js section . The data id matches the container’s cid.

What did i do wrong ?

[Deb (Deb Ghosh)]

Can you try this version and see if it works?

The rest of it looks correct.

//Change Primary Button to the name of your button. For e.g. events
$(document).on('click', '[data-name="events"]', function() {

/*change the 9920651 below to the cid of your container you want to scroll it to. You can get this from the screen HTML. 
*/
  Fliplet.Page.scrollTo('[data-id="9920651"]');

});

[Adelin]

still doesn’t do anything. The button is indeed clickable but there is no action when clicked.

[Adelin]

Hi Deb. Working fine since you went into my app to change [data-name=“events” to “value”.
Thank you so much !!!

This is the right code that works fine

$(document).on(‘click’, ‘[value=“label of the button”]’, function() {

Fliplet.Page.scrollTo(’[data-id=“xxxxxxx”]’);

});

[Adelin]

Well well well… i spend several hours to make my 12 containers work with the …scrollTo

Like i said, it works fine but didn’t work when i have published the app update a few minutes ago !!!

It works fine on PREVIEW in studio and also on fliplet viewer but now i have finished i wanted to see it work on the real thing… my smartphone.

Doesn’t work at all on the updated web-app. Any idea how this is possible and how to fix it ?

[Adelin]

Thanks again Deb for your help !

“”"""""" Fliplet.Page.scrollTo(’[data-id=“9920651”]’);

});"""""""""""""""" must be replaced by :

“”""""""“data-uuid=“918f501e-f479-43ac-b50c-26e11f16ec87"””""" that you can find when one “inspect” the element.

[Deb (Deb Ghosh)]

Hi Adelin,

Glad we were able to make it work!

All the best,
Deb