jQuery Animate在可滚动div内的顶部

Question

I currently have a page on my website that has a scrollable div on the right side of the website. Inside this div there are a bunch of questions the user has to fill out within bootstrap tabs. I'm trying to do some validation on these so they cannot move on until they answer them. Part of this validation is that it scrolls to the top of the div where the error message is and highlights the input field they missed.

I'm having a bunch of issues with scrolling to the top of the div though. It's doing all sorts of wonky things.

Originally, I had this

$('.html, body').animate({
  scrollTop: ($('#scrollToMe').first().offset().top)
},500);

and this works if you are just shooting it to the top of the whole page, but in this case I am not. I just want to make that scrollable div shoot to the top.

So then I tried calling the tab content

$('.tab-content').animate({
  scrollTop: ($('#scrollToMe').first().offset().top)
},500);

but this just did a little hop in the div and then shot to the top of the page.

So I tired yet again and tried calling out the id to see if that would work.

 $('#scrollToMe').animate({
  scrollTop: ($('#scrollToMe').first().offset().top)
},500);

and I just got the little hop as before.

I set up a small jsFiddle to show what's going on http://jsfiddle.net/vkut3/1/

Answer 1

You need to change the scrollable element to be the div instead of the html,body. Like this:

$('.scrollable').animate({
    scrollTop: ($('.errorMess').first().offset().top)
},500);