How to use the complete property in velocity.js to trigger localscroll

Question

I am using velocityjs, localscroll (which needs scrollTo).

I have a form that is hidden by default. I am using an anchor tag that when clicked, will show the form.

html

<a href="#myForm" class="button" id="show">Show the form</a>

jquery

$('#show').click(function (event) {
    $('#myForm')
    .velocity('slideDown', {'duration': 2000})
    .velocity({'opacity': 1}, {
        'complete': function () {
             $('#myForm').localScroll({
                 'target': 'body',
                 'duration': 2000,
                 'easing': 'swing',
                 'hash': false
             });
        }
    });
});

What I'm running into is that because I don't have an event.preventDefault to stop the default browser action of jumping to the target, my page is jumping to my form as it is fading in.

I'd like to scroll the page after the form is fully shown.

If I use event.preventDefault(), the page will not scroll at all. Which makes sense since at that point I am telling it not to do anything.

Answer 1

Instead of complicating it with yet another library, just use Velocity's scroll command to scroll to the required position, for example:

//...
complete: function (form) {
    $(form).velocity('scroll', { duration: 2000, easing: "swing" });
}