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

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?