Question

我正在测试jquery-steps插件，如果我点击 Next 或上一页按钮（在底部）和窗台顶部位于台阶下方。 div top（即如果我的浏览器窗口的高度太短，就会发生这种情况），滚动跳转到正文顶部。

显然没有办法阻止这种情况，我尝试了一切，包括编辑插件代码。我唯一能做的就是通过在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中，注释掉或删除以下代码（位于line 870 in the unminified version：

currentOrNewStepAnchor.focus();

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

Answer 2

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

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

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

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

3 个答案: