CODEWITHSUNDEEP
javascriptjqueryhtml
acr
acr

Reputation: 1746

Scrolling webpage using jquery onclick to a div

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

Upvotes: 1

Views: 9161

Answers (4)

shairya
shairya

Reputation: 183

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.

Upvotes: -1

Gianpaolo Di Nino
Gianpaolo Di Nino

Reputation: 1147

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.net/8Cy7V/

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

Upvotes: 4

Nev
Nev

Reputation: 1568

Try this:

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

See fiddle.

Upvotes: 1

user2663434
user2663434

Reputation: 

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

Upvotes: 0

Related Questions