Scroll to top on multistep form
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi bountify crew,

I need some JS code for scroll to top after user hit button "next" and screen to raise up for step two .

The problem arises when the user on the mobile phone clicks "next" and his screen stays down and does not see step two.

Original website with multistep form and test: http://www.akasa.com.hr/andjeo-blagosti

awarded to Codeword

Crowdsource coding tasks.

2 Solutions


Code to scroll to top of form:

  $(window).scrollTop($('#j-pro').offset().top);

1) Add the code into event click button:

<button class="j-primary-btn j-multi-next-btn j-hiddenBtn" onclick="$(window).scrollTop($('#j-pro').offset().top);" type="button">Sljedeća</button>

2) As alternative you can also define a function to reuse in the code:

function scrollElementToTop(el){
   $(window).scrollTop($('#j-pro').offset().top);
}

and bind the code:

$('#j-pro .j-multi-next-btn').on('click', function(){
  scrollElementToTop(this);
});

Don't use code "1)" if you use "2)" to bind the click.

3) I've edited the last code to check for errors before scroll top:

$('#j-pro .j-multi-next-btn').on('click', function(){
   var el = this;
    setTimout(function(){
         if ($('.j-error-view').lenght  === 0){    
               scrollElementToTop(el);
         }
    }, 300);
});

This code scroll the current page to the top of current form before second step is loaded, if the second form is at same height as the first, it should work.

Hi Stefano, with your code, the link to that page automatically drops the user screen on the form and the user does not see the top of the page. And I need that function on next button "j-multi-next-btn".
Saaskoo 3 months ago
Sorry, I realized you wanted to scroll to the top of the form. To scroll to the top of page you should use this code: $(window).scrollTop(0);
Stefano Balzarotti 3 months ago
No, I need to scroll on top of the form, not hole page. And only if the user type all the data in the first step and click on the button NEXT. Then you have to make a scroll on top of the form at the second step.
Saaskoo 3 months ago
And another problem with your code is that every click on the radio button display scroll to the top of the form.
Saaskoo 3 months ago
I've updated the code to use the "next" button. If you use the code to bind the click you should not use the onclick="$(window).scrollTop($('#j-pro').offset().top);" on html tag. This code scroll the page to top of page before the second form is loaded, so the second form should be at same height as first form.
Stefano Balzarotti 3 months ago
If you want, you can add some margin if you subtract some amount to this code: $(window).scrollTop($('#j-pro').offset().top - 40); (EDIT "40" as you wish ).
Stefano Balzarotti 3 months ago
The second (2) option works, but a bit of a collision with the source code. It has been so far that when a user does not fill a form, and after clicking next, make a scroll from the place where the user is and slightly going up. Now after I put your code, for a faulty entry in the form, the user always drops from the top of the form to the point where something needs to be added or corrected. Because of a better UX, can you do a little improved / adapted?
Saaskoo 3 months ago
I've updated the last code to check if there are errors before scroll top. I've set a timeout of 300 ms to check, but couldn't test the code, so try and let me know if works correctly.
Stefano Balzarotti 3 months ago
Hey Stefano, thank you for your time in this solution, but the Codeword's code is cleaner and simpler for me.
Saaskoo 3 months ago
Winning solution

Hey try this solution, It will work with no collison, I have made a little modification to the existing j-pro.js file so that it works with the existing code, no need to add any extra code, here is the new js file you can download it from here.
https://github.com/Tech-engine/test/blob/master/jquery.j-pro.js
Note: Even if you include form in any other page it will work as I have integrated the functionality to the core js file.
Just use this modified j-pro.js file and you are good to go
Thank You

Hi Codeword, I put your code, but nothing changed. After the click "next" button, the screen stays down.
Saaskoo 3 months ago
Soory, there was a typo in file, a comma was missing , now it should work, please clear the cache bfore using
Codeword 3 months ago
Clear cache, hard refresh, nothing changed. Screen stays down on next step.
Saaskoo 3 months ago
Actually, There a typo, Is it showing an error when you open inspect element now? Thank you
Codeword 3 months ago
After click next: Uncaught ReferenceError: $ofset is not defined at JustFormsPro.scrollToFormTop (jquery.j-pro.js:1372) at HTMLButtonElement. (jquery.j-pro.js:1115) at HTMLButtonElement.dispatch (jquery.min.js:2) at HTMLButtonElement.u (jquery.min.js:2)
Saaskoo 3 months ago
Okay, this is the custom function I added, let me fix this, its a minor issue,
Codeword 3 months ago
Hey, Saaskoo, I have fixed the $ofset not defined, Please try again and see if the error is gone, Thnk you
Codeword 3 months ago
That's a better solution. Can you do the same for the back button? To scroll to the top of the form when user click "back".
Saaskoo 3 months ago
offcouse, let me see
Codeword 3 months ago
Hey, I have done it, please check and let me know if any error appears. Thank you SaasKoo
Codeword 3 months ago
Awesome, works like a charm. Thanks Codeword for clean and fast solution :)
Saaskoo 3 months ago
Thank you SaasKoo, For choosing my solution.Thank you again
Codeword 3 months ago
View Timeline