Streaming live at 10am (PST)

Smooth Scroll Page to Section When Select Box Option Is Clicked?

Hello All,

I have a select box that is inside a HTML embed. When one of the select box options is selected it jumps to a named anchor (section) on the same page. What I can’t seem wrap my head around is how to get the page to smoothly scroll to that named anchor (section).

How can I get the select box options to trigger the smooth scrolling that typical links have when pointing to a named anchor on the same page using the built in Webflow .js? or is there an easier way in handling this that I am missing?

Here is a sample of test code for reference:

<form onChange="location.href='/transportation' + document.getElementById('scheduleJump').value; return false;">
<select class="w-input" style="font-size: 16px;"  id="scheduleJump" required >
	<option value="" disabled selected>Please Choose One</option>
	<option value="#section-01">When Clicked Smoothly Scroll to Some Section</option>
	<option value="#section-02">When Clicked Smoothly Scroll to Some Section</option>
	<option value="#section-03">When Clicked Smoothly Scroll to Some Section</option>
	<option value="#section-04">When Clicked Smoothly Scroll to Some Section</option>
	<option value="#section-05">When Clicked Smoothly Scroll to Some Section</option>
	<option value="#section-06">When Clicked Smoothly Scroll to Some Section</option>
</select>

Thanks!

1 Like

Shameless Bump Has anyone had any luck making elements in an embed trigger a smooth scroll when clicked? @PixelGeek @cyberdave

Hello @samliew

Thank you for the reply. I should have mentioned that I cannot share this clients site yet, as it is under development. I did however post the code I am using above. Granted, the option text “When Clicked Smoothly Scroll to Some Section” is different on the clients site.

Any thoughts on how can I get the select box options to trigger the smooth scrolling that typical links have when pointing to a named anchor on the same page using the built in Webflow .js?

Looks like there is no way to hook onto the WF smooth scroll method without the user clicking on a link. We could have hidden links that we can trigger a click on when the dropdown is changed, or, build the scroll functionality from scratch using pushstate and animate.

Hello @samliew

Thank you for the reply, I was going crazy trying to reverse engineer the WF smooth scroll to try and adapt it to my code. Knowing it’s not possible is a bummer, but at least I can focus on a new direction with it. I did consider jQuery but was hoping to keep it native to WF initially. At least it shouldn’t be to tough to jQuery that up.

Cheers!

Webflow requires jQuery, so you won’t be loading extra resources.

Just put all JavaScript/jQuery code in the Page Settings > Footer Code

@samliew

That’s what I get for not viewing the WF source… I assumed they rolled their own library, glad to hear that it is already included as I hate loading up a whole library for small adjustments.

Thanks for the tip!