javascript - jquery-steps: how to prevent page scrolling to top? - Stack Overflow

admin管理员组

文章数量:1324621

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!

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!

• javascript
• jquery
• dom
• jquery-steps

Share Improve this question Follow asked Sep 11, 2014 at 15:46 godzillantegodzillante 1,21411 gold badge1818 silver badges3333 bronze badges 7

• Strange. I would have suggested calling jQuery's event.preventDefault() on the click event handler, but the plugin does that already. Do you see the text #next or #previous appear in the URL bar when this happens? – Josh Harrison Commented Sep 11, 2014 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 Commented Sep 11, 2014 at 15:59
• Any errors in the browser's JS console before or after you click? – Josh Harrison Commented Sep 11, 2014 at 16:00
• No errors... I've been banging my head on this for 2 days before asking, believe me :-) – godzillante Commented Sep 11, 2014 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 Commented Sep 11, 2014 at 16:03

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 5

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

So when you encounter this and you're also using a validation like the jQuery Validate plugin, you have to ment 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();

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

本文标签： javascriptjquerysteps how to prevent page scrolling to topStack Overflow