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

【问题标题】：jquery-steps: how to prevent page scrolling to top?jquery-steps：如何防止页面滚动到顶部？
【发布时间】：2014-11-05 15:55:35
【问题描述】：

我正在测试 jquery-steps 插件，如果我点击 Next 或 Previous 按钮（在底部）和窗口顶部低于步骤的 div 顶部（即，如果我的浏览器窗口高度太短，则会发生这种情况），滚动跳转到 body 顶部。

显然没有办法阻止这种情况，我尝试了所有方法，包括编辑插件代码。我唯一能做的就是通过向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; }
    });

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

【问题讨论】：

奇怪。我会建议在单击事件处理程序上调用 jQuery 的 event.preventDefault()，但 plugin does that already.发生这种情况时，您是否看到文本 #next 或 #previous 出现在 URL 栏中？
不，我在浏览器的状态栏中看到它，同时将鼠标悬停在按钮上，但点击后在 URL 栏中没有看到。
点击之前或之后浏览器的JS控制台有什么错误吗？
没有错误......我在问这个问题之前已经敲了 2 天，相信我:-)
老兄。页面上的任何其他插件可能会干扰？尝试将它们取出，看看是否可以修复。

标签： javascript jquery dom jquery-steps

【解决方案1】：

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

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

在函数refreshStepNavigation中，注释掉或删除以下代码（line 870 in the unminified version:

currentOrNewStepAnchor.focus();

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

【讨论】：

你是怎么发现的？我欠你一杯啤酒。
哈哈不用担心，这个想法突然出现在我的脑海中！如果我在意大利，我可能会带你去喝啤酒……;)

【解决方案2】：

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

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

getStepAnchor(wizard, oldIndex).focus();

【讨论】：

【解决方案3】：

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

只要找到这个代码：

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

然后改成这个

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

【讨论】：