4

我正在测试 jquery-steps 插件，如果我单击Next或Previous按钮（在底部）并且窗口顶部低于步骤的 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; }
    });

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

4

3 回答 3

5

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

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

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

currentOrNewStepAnchor.focus();

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

于 2014-09-12T09:39:26.030 回答
2

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

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

getStepAnchor(wizard, oldIndex).focus();
于 2015-07-14T08:36:13.903 回答
1

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

只需找到以下代码：

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

并将其更改为

return g===f.currentIndex?(true,!1):void 0
于 2021-03-20T12:02:04.373 回答