Scroll to top after submit [#2462531]

I have a long form with many fields. Some fields are hidden and appear only when the user makes some choice. That makes the form longer a moves the page down. After submitting the page stays on the same place but confirmation about submitting apears on the start of the form. User must scroll up to see it.

Any idea to fix it?

Issue fork webform_ajax-2462531

Show commands

Start within a Git clone of the project using the version control instructions.

Add & fetch this issue fork’s repository

Or, if you do not have SSH keys set up on git.drupalcode.org:

Add & fetch this issue fork’s repository

2462531-scroll-to-top compare
Check out this branch for the first time

Check out existing branch, if you already have it locally

About issue forks

Comments

Comment #1

michelledarling

she, her

commented 30 March 2015 at 22:15

I need this by midnight tomorrow for a last-second client request on a website I'm working on. Any ideas????

Comment #2

seppe commented 11 April 2015 at 08:34

Hi, I've fixed this by using some code from the webform-ajax module in my script.js (the offset is the height of my fixed navigation bar):

    $('.links a:not(.ajax-processed)', context).each(function () {
      $wrapper = $(this).parents('[id^=webform-ajax-wrapper]');
      if ($wrapper.length) {
          $.scrollTo($('.webform-confirmation'), 500, {'offset': -80});
      }
    });

I use the jquery scrollto library here (https://github.com/flesler/jquery.scrollTo), but I think you can easily fix this with default JQuery code (not tested):

    $('.links a:not(.ajax-processed)', context).each(function () {
      $wrapper = $(this).parents('[id^=webform-ajax-wrapper]');
      if ($wrapper.length) {
          var topval = $('.webform-confirmation').offset().top;
          $('html, body').animate({
	        scrollTop: topval
          }, 3000, 'easeInOutQuart');
       }
    });