White Arrow icon
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:

browser mockup
Share:
Heart icon

A tongue scraper is is so much better in cleaning your tongue instead of the normal brushing it.

Might also interest you:

Glossary

Cloneable
JavaScript
CMS

A clonable for creating an Alphabetical glossary

Read more
Blue arrow iconWhite Arrow icon

Dynamic Height

Code
Tricks
JavaScript

A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.

Read more
Blue arrow iconWhite Arrow icon

Desktop Grid, Mobile Slider

Cloneable
Tricks
Layout

Change Webflow's Slider to act as a "regular" grid block on desktop, but go back to Slider on Tablet and smaller screens.

Read more
Blue arrow iconWhite Arrow icon