Skip to content

Instantly share code, notes, and snippets.

@nathanhornby
Created December 4, 2015 11:37
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save nathanhornby/11fad799dc2ab82476c8 to your computer and use it in GitHub Desktop.
Save nathanhornby/11fad799dc2ab82476c8 to your computer and use it in GitHub Desktop.
Scroll to active field in form (typeform style animation) using velocity.js
// Insert into some kind of 'focus' action
var parent = $(this).parent().parent('.fieldWrap'); // Target a wrapper
// Reset active state
$('.fieldWrap').removeClass('active');
// Add active state to current field
parent.addClass('active');
var fieldHeight = parent.outerHeight();
var windowHeight = $(window).height();
var scrollOffset = (windowHeight - fieldHeight)/2;
parent.velocity('scroll', {
duration: 300,
offset: -scrollOffset,
easing: 'easeOutSine'
})
@navenchary
Copy link

Can someone please provide a working example of how to use the above code?

@gangesh
Copy link

gangesh commented Jun 10, 2020

Works with velocity 1.5.0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment