Animate scrollTop on a div with overflow while using waypoints

Question

I want to have a div with automatic scrolling content when the user scrolls to that point in the website.

It's like this example on JSFiddle

$("#div").animate({ scrollTop: 1000 }, 2000);

With this above example the scrolling happens immediately when the page loads.

My div with the scrolling content is further down on my site, so I want it to automatically scroll when it hits that waypoint. (I'm using jquery-waypoints in my page already).

Answer 1

Assuming you want this scroll animation to happen when #div hits the top of the window:

$('#div').waypoint(function(direction) {
  $(this).animate({ scrollTop: 1000 }, 2000);
});

You may want to use that direction parameter to do something different if its value is "up". You may want to use triggerOnce: true to just do the animation once and then never again. It's up to you.