▼
Streaming live at 10am (PST)

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

Design help Custom code
#1

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
#2

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

#3
#4

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?

#5

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.

#6

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!

#7

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

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

#8

@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!