Back to all Elements

Scroll & Focus

Scroll down and focus on an input field when a button is clicked

* This method also opens the keyboard when user is on mobile.

So, this one is easy peasy ;)

Add this code to your page before </body> tag

<script>

$('.btn').click(function () {

   $('html').animate({scrollTop: $('#email').offset().top - 200}, 1000);

   $('#email').focus();

});

</script>

Copy

Then give your button a 'btn' ID, and to the input field 'email' ID.

THAT's IT !

really!

Preview:

Destin's Youtube channel Smarter Every Day is one of my favourite places on the web.

Might also interest you:

Changing Text

Interactions
Cloneable
Tricks

Change text in a sentence/headline with Webflow's interactions

Read more

Tabs with scrollable (sideways) Menu

Cloneable
Code
Design

A Webflow Tabs widget with some edits and custom code to make the menu scrollable on desktop & mobile

Read more

Contact form as a Chat widget

Cloneable
Code
Tricks

A contact form disguised as a chat widget.

Read more