jquery-steps: how to prevent page scrolling to top?

Question

I'm testing the jquery-steps plugin, and if I click on the Next or Previous button (on the bottom) and the window top is below the steps' div top (i.e. this happens if my browser window is just too short in height), the scroll jumps to the body top.

Apparently there's no way to prevent this, I tried everything including editing the plugin code. The only thing I could do was setting a different scroll position by adding some code to the onStepChanging event:

$("#steps-container").steps({
        /* ... */
        onStepChanging: function(event, currentIndex, priorIndex)
        {
            var top = 300;
            var pos = $(window).scrollTop();
            if (pos > top + 48)
            {
                $('body').scrollTop(top);
            }
            return true;
        },
        labels:
        {
            /* ... */
        },
        onFinishing: function (event, currentIndex) { submitOrderForm(); return true; }
    });

Can somebody help me sorting this out? Thanks!

Answer 1

Fortunately, I think I've found the solution.

Unfortunately, it involves making your own edited version of the plugin, because the developer does not provide an option for this, or expose this function for overriding.

In the function refreshStepNavigation, comment out or remove the following code (at line 870 in the unminified version:

currentOrNewStepAnchor.focus();

I couldn't see anything to do with modifying scroll position or finding the top offset of an element in the source, so twigged it might be trying to focus some element which causes the browser to jump to it. Tried this in a quick jsfiddle and it seemed to work...

Answer 2

So when you encounter this and you're also using a validation like the jQuery Validate plugin, you have to comment out or remove a different line in some situations.

In my case, if form validation fails the step stays the same and the browser view pops to the top. Comment out or remove line 1273 to remove this behaviour (see here):

getStepAnchor(wizard, oldIndex).focus();