Page scrolling to top on form submit about swup

[gmrchk]

Very nice point! This is a new feature which I actually haven't even used yet, so thank for a heads up.

I've added support for including a hash (id of the element) in the action attribute of the form, so the page will scroll to your form after sending and getting the reply.

<form action="#form" id="form" data-swup-form>

I would also suggest disabling swup's scroll on submit and enabling it after the page is reloaded, so it does not move at all when sending the form.

swup.options.scroll = false

[MikeHarrison]

Thanks that's awesome! Will give it a try tomorrow. Would it be possible to elaborate a bit on the code required for your second point?

I would also suggest disabling swup's scroll on submit and enabling it after the page is reloaded, so it does not move at all when sending the form.

[gmrchk]

Sure! The easiest way to disable scrolling for forms would be...

document.addEventListener('swup:formSubmit', event => {
    swup.options.scroll = false;
});
document.addEventListener('swup:animationInDone', event => {
    swup.options.scroll = true;
});

Didn't test it, hope there are no typos or something... but you get the idea.

[MikeHarrison]

Yep that was just the ticket thank you! Slight typo, final code below in case anyone else wants to do the same:

document.addEventListener('swup:submitForm', function() {
    swup.options.scroll = false;
});
document.addEventListener('swup:animationInDone', function() {
    swup.options.scroll = true;
});