scroll an element but not the whole page

Question

I have a filter panel in my page, there are some filter value on the panel. Like "gender' "age". if you click on "age" the filter will expand and also other filters

The issue is when the filter is the last one, it will expand but I can't see the value if I do not scroll up the panel manually.

I am asking if I can bind a click to the filter.

I've tried this way:

$("#filter").click(function() {
  $('html, body, div').animate({
    scrollTop: 500}, 2000);
});

but this will scroll both the page and panel. If I use " 'html,body' ",then it will only scroll the page. I am wordering how can I appoint to the filter panel?

Answer 1

You want to ignore html and body and just focus on the div:

$('div').animate({ scrollTop: 500 }, 2000);