Scroll To Item By ID

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?

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

1 Like

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

UPDATE: It works. :slight_smile:

3 Likes

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>

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

Want browser to scroll to div id profileCard1

When?

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

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.

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>

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.

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')">

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.

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?

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

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