How can I scroll to an element so that it's at the bottom of the scrolling div?

Question

I want to automatically scroll to an element but I can't get it to scroll so that #elem is at the bottom of the #crm_corp_scroll div. I tried using

$j('#crm_corp_scroll').animate({scrollTop: $j('#'+elem).offset().top},'fast');

but it scrolls the div so that the element is at the top and out of view.

I tried the native scrollIntoView but it scrolls me to the middle of the element. I want the full element to be into view.

jsFiddle for how it works right now . I want it to scroll so row6 is at the bottom of #crm_corp_scroll.

Figured out a sollution:

$j('#crm_corp_scroll').animate({scrollTop: ($j('#'+elem).offset().top - $j('#crm_corp_scroll').height() + $j('#'+elem).height() * 2) },'fast');

this scroll elem into view at the bottom of the #crm_corp_scroll div.

Answer 1

EDIT:

Tried different approach which can fit your needs better:

http://jsfiddle.net/HLxGM/5/

---

I changed your jsfiddle here

See if it works as intended.

I took the row.offset().top - box.height() + (row.height() * 2) and it seems to work as intended.

A more reliable solution here

Take the row.offset().top - box.offset().top - box.height() + (row.height() * 2) and it also works when it's on other places then the start of a document.