Smooth Scroll - Why Does It Keep Scrolling To The Top of the Page?

Wappler General
1

I have a smooth scroll element on my page:

<dmx-smooth-scroll id="scroll"></dmx-smooth-scroll>

I have a button with:

<button id="b_proceed_to_payment" class="btn btn-success" dmx-click="show_payment_details.setValue(1);scroll.goto('#s_payment_details'); (...and other actions)">Finalise Booking</button>

I have a section:

<section id="s_payment_details" dmx-show="show_payment_details.value==1">

But when I click on the button, I am scrolled to the top of the page rather than to element #c_payment_details.

I then created a test button which just has the scroll.goto on it:

<button class="btn" dmx-on:click="scroll.goto('#s_payment_details')">Scroll</button>

And this scrolls to #s_payment_details correctly.

What have I done wrong with my use of the smooth scroll element?

2

What extra actions do you next to the scroll action, when you do something that updates the DOM then it is possible that intervenes with the scroll.

3

Here is the complete button:

attendees and responses are data stores.

<button id="b_proceed_to_payment" class="btn btn-success" dmx-on:click="

                  show_payment_details.setValue(1);
                  scroll.goto('#s_payment_details');

                  attendees.update({$id: $id},{email: i_contact_email.value, first_name: i_first_name.value, last_name: i_last_name.value, mobile_phone: i_mobile_phone.value, price: i_attendee_price.value, show_proceed_to_payment: 0, known_as: i_known_as.value, contact_details_editable: 0, price_amount: prices_to_show.data.where(`id`, i_attendee_price.value, &quot;==&quot;).values(`price_amount`)});
                  
                  exit_attendee.load({booking_item: booking_item, price: i_attendee_price.value, question: question, quantity: 1, is_for: 1, price_amount: prices_to_show.data.where(`id`, i_attendee_price.value, &quot;==&quot;).values(`price_amount`), contact: contact, is_per: 'a', first_name: i_first_name.value, last_name: i_last_name.value, attendee_number: $id, price_tax_rate: prices_to_show.data.where(`id`, i_attendee_price.value, &quot;==&quot;).values(`tax_rate`), email: i_contact_email.value, mobile_phone: i_mobile_phone.value, known_as: i_known_as.value,  alert_level: alert_level, price_name: prices_to_show.data.where(`id`, i_attendee_price.value, &quot;==&quot;).values(`title`)});

                  fetch_price_to_pay.load()
                  " dmx-show="show_proceed_to_payment==1">Finalise Booking</button>

exit_attendee is a server connect:

<dmx-serverconnect id="exit_attendee" url="dmxConnect/api/form/form_exit_attendee.php" noload="noload" dmx-on:success="
      responses.update({attendee_number: exit_attendee.data.attendee_number.toNumber()},{contact: exit_attendee.data.contact});
      attendees.update({$id: exit_attendee.data.attendee_number.toNumber()},{contact: exit_attendee.data.contact})
      "></dmx-serverconnect>

fetch_price_to_pay is a server connect:

<dmx-serverconnect id="fetch_price_to_pay" url="dmxConnect/api/form/fetch_price_to_pay.php" noload="noload" dmx-on:success="admission_free.value==0?manage_stripe_payment_intent.load({pay_deposit: 0}):false;flow_proceed_to_payment.run()">
4

Do you have any thoughts on how I can fix this issue @patrick?

5

I see you have show_payment_details.setValue(1) first, So I think that the element with the id s_payment_details is probably hidden and you use that value to toggle it visible. Is this correct?

The problem with that method is that the element is not directly visible, it does set the value in that in that moment but the element is probably having an attribute like dmx-show="show_payment_details" and this is being evaluated on the next cycle. The javascript will first finish the execution of the click handler. So the scroll.goto will be called while the element is still hidden and this causes it to scroll to the top because a hidden element will return 0 for its position.

To solve it you will need a bit of a delay before executing the scroll.goto, perhaps adding it to the load event of one of the server connects that you are loading there.

6

Brilliant, thank you @patrick, I’ll give it a go later on today! :slight_smile: