onClick go to the bottom of page using jQuery .animate

Question

I have a table where last column contains action buttons which opens another section under the table. When that section is opened the body page remain where the button from action column was pressed. I need to use a jQuery preferably with .animate which scrolls .html page to that opened section under the table.

fiddle example: http://jsfiddle.net/Ksb2W/110/

If anyone cand help me with this. Thank you.

Solution

demo http://jsfiddle.net/h4ZQR/ or http://jsfiddle.net/byRRY/

Good API: http://api.jquery.com/scrollTop/

Please note: you can use: .animate({scrollTop: $("#whateverdiv").offset().top}); to go to certain sections of page.

Hope this helps

html

<a href="#bottom" id="hulk">Click me to go to bottom</a>

code

$("#hulk").click(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, "slow");

});​

OR

$("a[href='#bottom']").click(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, "slow");
  return false;
});​

Comments

[RulerNature]

and for "hulk" id you must give a margin-top or something from css.

[Tats_innit]

@RulerNature yeps :) , if css need to go with it, thanks for that

[Tats_innit]

@mcmwhfy Glad it helped, :)