Scroll to the bottom of a div after clicking on Submit

Question

I wrote a form which needs to be compiled by the user in order to do some calculation. An AJAX script makes the result appear in a div right after the "SUBMIT" button. However I noticed that impatient users tend to click multiple times on "SUBMIT" because they don't see that the results are shown right after the button itself. I was wondering how to scroll to the bottom of the div ([id=results]) which contains the results whenever the user clicks on "SUBMIT". Of course a submit button can't contain a href attribute, so I don't know how to create an html anchor... I guess I need another little bit of jquery.

Edit: source code: calculator1.php

<form name="formpeso" id="formpeso" action="" method="post">
        <div>
            <label for="altezza">Inserisci la tua altezza <strong>(in cm)</strong></label>
            <input type="text" name="altezza" id="altezza" onkeyup="commadot(this)" value="" />
[FOO... FOO...]     
            <input type="submit" id="submit" value="send data" />
     </div>   
    </form>

<div id="results">RESULTS WILL APPEAR HERE AFTER CLICKING ON SUBMIT</div>

Here's the function which validates the textfields and shows the results (processed into calculator2.php) into

$(document).ready(function(){
    $("#formpeso").validate({
        debug: false,
        rules: {
            altezza: {min:20, required: true},
            peso: {min:1, required: true},
            vita: {min:1, required: true},
            fianchi: {min:1, required: true},
            collo: {min:1, required: true},
            polso: {min:1, required: true},
        },
        messages: {
            altezza: "Non hai compilato il campo!<br />",
            peso: "Non hai compilato il campo!<br />",
            vita: "Non hai compilato il campo!<br />",
            fianchi: "Non hai compilato il campo!<br />",
            collo: "Non hai compilato il campo!<br />",
            polso: "Non hai compilato il campo!<br />",

        },
        submitHandler: function(form) {
            // do other stuff for a valid form
            $.post('calculator2.php', $("#formpeso").serialize(), function(data) {
                $('#results').html(data);
            });
        }
    });
});

demo: link

Answer 1

Use the version of @Zee Tee but you have to keep in mind that you have to scroll to the bottom AFTER the data is loaded into the div.

that means do this

  var div = $('div#results')
  var o = div.offset().top; //gets the top position of the div
  var h = div.outerHeight(); // gets the height of the div

   div.scrollTop( o + h ); //scrolls page to the bottom of the div

in the $.post part next to

        $.post('calculator2.php', $("#formpeso").serialize(), function(data) {
            $('#results').html(data);
            // do positioning here AFTER loading the data!
        });

give it a try :)

Answer 2

This will scroll the page to the bottom of the div.

 $('button[type="submit"]').click(){
  var div = $('div#results')
  var o = div.offset().top; //gets the top position of the div
  var h = div.outerHeight(); // gets the height of the div

   div.scrollTop( o + h ); //scrolls page to the bottom of the div

 });

You can also disable the submit button before the ajax call, then enable it back when the ajax is done, just for an extra measure.

 $('button[type="submit"]').attr('disabled',true);
 $.get(url,function(){
   $('button[type="submit"]').attr('disabled',false);        
 });

This would be in your click function as well.

So it would look like this complete:

 submitbutton = $('button[type="submit"]')

 submitbutton.click(){

 $(this).attr('disabled',true);

  var div = $('div#results')
  var o = div.offset().top; //gets the top position of the div
  var h = div.outerHeight(); // gets the height of the div

   div.scrollTop( o + h ); //scrolls page to the bottom of the div

    //your ajax request
    $.get(url,function(){
      submitbutton.attr('disabled',false);        
    });

 });