admin管理员组文章数量:1323176
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!
Share Improve this question asked Sep 11, 2014 at 15:46 godzillantegodzillante 1,2141 gold badge18 silver badges33 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
3 Answers
Reset to default 5Fortunately, 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
版权声明:本文标题:javascript - jquery-steps: how to prevent page scrolling to top? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742132888a2422240.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论