Scroll To Item By ID

Wappler General How To
#1

Hi.

I am trying to scroll my page to next element when an element is clicked.
image

I don’t have the exact position on page, just the ID. Can this be done using the Browser component’s scroll to options?

Link to form
#2

Hi @nshkrsh
No, just use the Smooth Scroll component when you want to scroll to an #ID :slight_smile:

2 Likes
#3

Oh. Did not try that. Will check and get back.

UPDATE: It works. :slight_smile:

3 Likes
#5

Trying to use the smooth scroll but not sure how to set it up. Please let me know the right setup!

Smooth scroll setup:

<dmx-smooth-scroll id="scrollToCard" selector="a[href*=#profileCard1]">
</dmx-smooth-scroll>

Then the trigger when my search result displays a card beyond the screen bottom with div id profileCard1

<form id="searchTerm">
<input id="search" class="form-control" placeholder="Search here" type="text" name="search" noresultslabel="Sorry no result..." 
dmx-bind:data="keywordListServconn.data.qryFullKeywordList" optionvalue="keyword" optiontext="keyword" 
dmx-on:changed="scrollToCard.goto('#profileCard1')">
</form>
#6

This is wrong … what are you trying to target exactly?

#7

Want browser to scroll to div id profileCard1

#8

When?

#9

After the search bar has a text value sent to the filter and returns a few card profiles in a repeat row.

#10

Sorry, can you clarify?
When the text input has a value (when you enter a value there)? Or when a repeat renders some results? Or?
Or is it an autocomplete input?

Please be more detailed.

#11

Yes, it is either an auto-complete or a checkbox, which sends the searched value to a filter.
Then a list of card profiles gets displayed further down in a repeat row.

<form id="searchTerm">
<input id="search" class="form-control" placeholder="Search here" 
is="dmx-autocomplete" type="text" name="search" noresultslabel="Sorry no such skill..." 
dmx-bind:data="keywordListServconn.data.qryFullKeywordList" 
optionvalue="keyword" optiontext="keyword" 
dmx-on:changed="scrollToCard.goto('#profileCard1')">
</form>
#12

You need to use the onupdated event for the autocomplete component like:

dmx-on:updated="scroll1.goto('#profileCard1')">

and this:

is not correct. You can leave its default value or just leave it empty in the UI.

#13

Tried with default value (a[href*="#"]) and empty selector but I’m afraid no scrolling happening.

image

My updated input div:

<input id="search" 
class="form-control" placeholder="Search here" is="dmx-autocomplete" 
type="text" name="search" noresultslabel="Sorry no such skill..." 
dmx-bind:data="keywordListServconn.data.qryFullKeywordList" optionvalue="keyword" 
optiontext="keyword" dmx-on:updated="scrollToCard.goto('#profileCard1')">
#14

This is not related to the dynamic event. You can enter pizza there it won’t affect how the dynamic event works

Are you sure there is an element on the page having an id="profileCard1" then? If it doesn’t scroll then most probably there is no such element on the page.

#15

You made me doubt so i looked over in the browser’s elements and it’s there:
image
Should I link to a column or row ID instead of the card?

#16

But is it there at the moment of click or is it rendered later?
Why not just point to: #searchBarResult if cards are created later?

1 Like
#17

Gotcha.
It worked when I used the unique div ID of the repeat row, other IDs are repeated so no scrolling.

#18

i know its an OLD post by now…

But remember if you have a large repeat on your site you might want to add a wait step just to make sure the data is loaded. With a flow… normally a 500 ms wait works great.

Assuming that you are passing the var from another page.

<div class="row" is="dmx-repeat" id="repeatyourrows" dmx-bind:repeat="yourdata.data" dmx-on:updated="run([{wait:{delay:500}},{run:{action:`scroll1.goto(\'#id\'+query.id)`,name:'ScrolltothisID'}}])">
#19

Hi Mozzi,

Can you edit your post for your code block to be surrounded by ``` instead of a single `? Because the code is breaking the code block. Also the ticks need to be on its own line

Edit: No worries, Teodor rescued you :whale:

1 Like
#20

thanks for fixing Teodor… mmmm stupid question … i normally used the < / > in the editor when posting code… what should i use… to get it like your post… where the code … actually looks like code… lol… stupid question… but if you dont know … then you dont know…

lol <div> got it awesome </div>

if anybody else want to know… just encapsulate your code with ``` at the start and end… its the button before your number 1 key on the top of you keyboard (well on my keyboard :slight_smile: )