Multistep Form Smooth Scroll to Top

Showcase
1

I am currently building a multistep form that has some long pages/ steps. To improve the survey flow, I want to scroll back to the top of the form when the user navigates to a new page. This is a modified version of the scroll-to-top plug-in code. I figured I would post the script here if anyone else needs it.

Make sure you change component_4 to the component # of your form.

Javascript

/* Smooth Scroll Navigation */
TB.render('component_4', function(data) {
    // Function to handle smooth scrolling
    const handleScroll = function() {
        jQuery('html, body').animate({
            scrollTop: jQuery(data.ele).offset().top
        }, 750);
    };

    // On click
    jQuery(document).on('click', '.btn-form-page-prev, .btn-form-page-next', handleScroll);
});

scrolltotop-ezgif.com-video-to-gif-converter

3 Likes