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; }
    });

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

- godzillante

---

在您单击之前或之后，浏览器的JS控制台中是否有任何错误？ - Josh Harrison

没有错误……在询问之前，我已经为此苦苦思考了两天，相信我 :-) - godzillante

兄弟，页面上还有其他可能会干扰的插件吗？试着把它们移除看看是否能解决问题。 - Josh Harrison

你有一个链接可以发布吗？ - Josh Harrison

嗨，Zougen，即使在插件的演示页面上也会出现这种情况（尽管页面会跳转到另一个位置，远在div的上方，但不是页面的确切顶部）：http://www.jquery-steps.com/Examples#basic - godzillante

Answer 1

很幸运，我认为我找到了解决方案。

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

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

currentOrNewStepAnchor.focus();

我没有看到与修改滚动位置或查找元素顶部偏移量有关的任何内容，所以想到可能是尝试聚焦某个元素导致浏览器跳转。在快速的jsfiddle中尝试了这个方法，似乎起作用了...

- Josh Harrison

---

你是怎么发现的？我欠你一瓶啤酒。 - godzillante

哈哈，不用担心，这只是我突然想到的想法！如果我有机会去意大利，也许我会向你请教啤酒... ;) - Josh Harrison

Answer 2

当你遇到这种情况并且还使用像jQuery Validate插件这样的验证时，有些情况下你必须注释掉或删除不同的一行代码。

在我的情况下，如果表单验证失败，则步骤保持不变，浏览器视图弹回顶部。注释掉或删除第1273行代码即可消除此行为（请参见此处）。

getStepAnchor(wizard, oldIndex).focus();

- Joost Verkaik

Answer 3

我曾经遇到过验证问题，是在压缩版（v1.1.0）中出现的，希望对某些人有所帮助。

只需找到以下代码：

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

将其翻译为中文：

并将其更改为

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

- Saulius maladec