Animate Height Bottom to Top Instead of Top to Bottom

Question

How can I achieve height animation in reverse?

Instead of the typical animation starting from the top and working its way down, how can I have it start the animation fr

Answer 1

position: absolute;
bottom: 0px;

animate bottom + 1.

You can also use negative values for top or margin-top to move upwards.

Answer 2

Animate as you would for top-to-bottom, but add element.scrollTop = 99999;

This will ensure that the bottom of the content is visible (unless for some reason it's 100,000 pixels tall) and the effect will be bottom-to-top animation.

Answer 3

You div and your a tags have the same ID. They must have unique IDs.

$('a#line-1').click(function() {
    $('div#line-1').animate({

needs to be something like:

$('a#line-1').click(function() {
    $('div#unique_id').animate({

Example Fix