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!

Strange. I would have suggested calling jQuery's event.preventDefault() on the click event handler, but the [plugin does that already](https://github.com/rstaib/jquery-steps/blob/master/build/jquery.steps.js#L782). Do you see the text `#next` or `#previous` appear in the URL bar when this happens? — Josh Harrison, Sep 11 '14 at 15:57
No, I see it in the browser's status bar while hovering on the button but not in the URL bar after clicking. — godzillante, Sep 11 '14 at 15:59
Any errors in the browser's JS console before or after you click? — Josh Harrison, Sep 11 '14 at 16:00
No errors... I've been banging my head on this for 2 days before asking, believe me :-) — godzillante, Sep 11 '14 at 16:02
Dude. Any other plugins on the page that might be interfering? Try taking them out and see if it fixes. — Josh Harrison, Sep 11 '14 at 16:03
Hi Zougen, this happens even in the plugin's demo page (altough the page jumps to another position, much above the div but not the exact top of the page): http://www.jquery-steps.com/Examples#basic — godzillante, Sep 12 '14 at 08:57

score 5 · Accepted Answer · answered Sep 12 '14 at 09:39

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...

Haha no worries, the thought just popped into my head! If I'm ever in Italy I might take you up on the beer... ;) — Josh Harrison, Sep 12 '14 at 10:34

score 2 · Answer 2 · answered Jul 14 '15 at 08:36

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();

score 1 · Answer 3 · answered Mar 20 '21 at 12:02

1

I had same problem with validation in minified version (v1.1.0), thought it might be helpful for somebody.

Just find this code:

return g===f.currentIndex?(j(d,g).focus(),!1):void 0

And change it to this

return g===f.currentIndex?(true,!1):void 0

answered Mar 20 '21 at 12:02

Saulius maladec

76
1
5

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

3 Answers3