jquery-steps：如何防止页面滚动到顶部？

Question

我正在测试 jquery-steps 插件，如果我单击“下一步”或“上一步”按钮（底部）并且窗口顶部低于步骤的 div 顶部（即，如果我的浏览器窗口高度太短，则会发生这种情况)，滚动跳转到正文顶部。

显然没有办法阻止这种情况，我尝试了一切，包括编辑插件代码。 我唯一能做的就是通过向onStepChanging事件添加一些代码来设置不同的滚动位置：

$("#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; }
    });

有人可以帮我解决这个问题吗？ 谢谢！

Answer 1

幸运的是，我想我已经找到了解决方案。

不幸的是，它涉及制作您自己编辑的插件版本，因为开发人员没有为此提供选项，也没有公开此功能以进行覆盖。

在函数refreshStepNavigation ，注释掉或删除以下代码（ 在未缩小版本的第 870 行：

currentOrNewStepAnchor.focus();

我看不出与修改滚动位置或在源中查找元素的顶部偏移有任何关系，因此 twigged 它可能试图聚焦某些导致浏览器跳转到它的元素。 在一个快速的 jsfiddle 中尝试了这个，它似乎有效......

Answer 2

因此，当您遇到这种情况并且您还使用了像 jQuery Validate 插件这样的验证时，您必须在某些情况下注释掉或删除不同的行。

在我的情况下，如果表单验证失败，步骤保持不变，浏览器视图会弹出到顶部。 注释掉或删除第 1273 行以删除此行为（请参阅此处）：

getStepAnchor(wizard, oldIndex).focus();

Answer 3

我在缩小版本（v1.1.0）中遇到了同样的验证问题，认为它可能对某人有帮助。

只需找到此代码：

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

并改成这样

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