I have form on html and submitting the form using below code

<div class="submit-clear">
<input  id="generate" type="submit"  name="script" value="create"/>
</div>

The form data will be displayed on a separate div at bottom of the hash tag page #output

output section div id is

<div id="output-main">

<-------output of the form data will be displayed here---->

</div>

Once the user submit the form, I need to scroll the webpage to the <div id="output-main"> section to display the output. After searching previous question, I got below solution, but its not working for me.Please help me here

$('#generate').click(function() {

   $.scrollTo($('#output-main'), 500);
});

EDIT:

I have to scroll the webpage after form submit.The webpage will refresh with data after formsubmit and it load the #ouput page with form output

I have form on html and submitting the form using below code

<div class="submit-clear">
<input  id="generate" type="submit"  name="script" value="create"/>
</div>

The form data will be displayed on a separate div at bottom of the hash tag page #output

output section div id is

<div id="output-main">

<-------output of the form data will be displayed here---->

</div>

Once the user submit the form, I need to scroll the webpage to the <div id="output-main"> section to display the output. After searching previous question, I got below solution, but its not working for me.Please help me here

$('#generate').click(function() {

   $.scrollTo($('#output-main'), 500);
});

EDIT:

I have to scroll the webpage after form submit.The webpage will refresh with data after formsubmit and it load the #ouput page with form output

• javascript
• jquery
• html

Share Improve this question Follow edited Aug 12, 2013 at 11:26 Gianpaolo Di Nino 1,13755 silver badges1717 bronze badges asked Aug 8, 2013 at 10:42 acracr 1,7461111 gold badges4949 silver badges8383 bronze badges 4

• Try $.scrollTo('#output-main', 500); instead. – PiLHA Commented Aug 8, 2013 at 10:49
• @PiLHA : I tried it,but not working – acr Commented Aug 8, 2013 at 10:58
• Chrome > Right click > Inspect Element > Console. Make sure you aren't getting any javascript errors because the answers you're getting do work. – Rick Calder Commented Aug 8, 2013 at 11:18
• @ Rick Calder This is the error I am seeing Uncaught TypeError: Object #<Object> has no method 'on' – acr Commented Aug 8, 2013 at 14:50

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Have you correctly included the scrollTo library? Are you sure you are not getting any js error elsewhere (this may break your code)?

here is a working demo: http://jsfiddle/8Cy7V/

$("#generate").click(function() {
    $.scrollTo( '#output-main', 800);
});

Try this:

$(document).ready( function() {
   $('#generate').click(function(e) {
       e.preventDefault();
       $('html, body').animate({scrollTop:$("#output-main").offset().top}, 500);
   }); 
});

See fiddle.

$("#output-main").scrollTop($("#output-main")[0].scrollHeight);

Do you submit the form? I mean, does your page refreshes when submit is clicked? If yes, try below code:

$(document).ready(function(){
   var item = $('#output-main');
   $('html,body').animate({scrollTop: item.offset().top});
});

Make sure jquery is included on this page. Of course, you have to check when do you want to execute the above code. You have to check if form is submitted only then the code should run instead of document ready state.