Make sure only one scroll animation gets queued/run.

The scrollIntoView function can be called multiple times,
which resulted in multiple (10+) scroll animations getting queued.

After the first animation successfully scrolled to the top of the step,
the others kept running one by one. The animations weren't visible
because the element was already scrolled to its final position, but if
you tried manually scrolling down while the animations were still running,
the window would be scrolled right back up.

problem_builder/public/js/mentoring_with_steps.js

@@ -387,9 +387,16 @@ function MentoringWithStepsBlock(runtime, element) {
     }
 
     function scrollIntoView() {
+        // This function can be called multiple times per step initialization.
+        // We must make sure that only one animation is queued or running at any given time,
+        // that's why we use a special animation queue and make sure to .stop() any running/queued
+        // animations before enqueueing a new one.
         var rootBlock = $(element),
-            rootBlockOffset = rootBlock.offset().top;
-        $('html, body').animate({ scrollTop: rootBlockOffset }, 500);
+            rootBlockOffset = rootBlock.offset().top,
+            queue = 'sb-scroll',
+            props = {scrollTop: rootBlockOffset},
+            opts = {duration: 500, queue: queue};
+        $('html, body').stop(queue, true).animate(props, opts).dequeue(queue);
     }
 
     function initClickHandlers() {