Question

我正在尝试使用jQuery Smart Wizard 4创建一个多步骤表单，但是由于某种原因，当加载我的网站时，表单向导的第一步将获得焦点，页面将滚动至该页面，最后是哈希＃步骤1已添加到URL。

我不想要这个，但是不幸的是我无法禁用它或在文档中找不到关于它的任何东西。

这是我启动向导的方式：

(function($) {
  // Função do smartwizard
  $(document).ready(function() {
    // Toolbar extra buttons
    if ($("#smartwizard").length == 0) return; // cancela função se nao achar o wizard
    $("#smartwizard").smartWizard({
      theme: "arrows",
      useURLhash: false
    });
  });
})(jQuery);

这是表格：

<form action="#" id="myForm" role="form" data-toggle="validator" method="post" accept-charset="utf-8">

<div id="smartwizard">
            <ul>
                <li><a href="#step-1">Step 1<br /><small>Email Address</small></a></li>
                <li><a href="#step-2">Step 2<br /><small>Name</small></a></li>
                <li><a href="#step-3">Step 3<br /><small>Address</small></a></li>
                <li><a href="#step-4">Step 4<br /><small>Terms and Conditions</small></a></li>
            </ul>

            <div>
                <div id="step-1">
                    <h2>Your Email Address</h2>
                    <div id="form-step-0" role="form" data-toggle="validator">
                        <div class="form-group">
                            <label for="email">Email address:</label>
                            <input type="email" class="form-control" name="email" id="email" placeholder="Write your email address" required>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>

                </div>
                <div id="step-2">
                    <h2>Your Name</h2>
                    <div id="form-step-1" role="form" data-toggle="validator">
                        <div class="form-group">
                            <label for="name">Name:</label>
                            <input type="text" class="form-control" name="name" id="email" placeholder="Write your name" required>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                </div>
                <div id="step-3">
                    <h2>Your Address</h2>
                    <div id="form-step-2" role="form" data-toggle="validator">
                        <div class="form-group">
                            <label for="address">Address</label>
                            <textarea class="form-control" name="address" id="address" rows="3" placeholder="Write your address..." required></textarea>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                </div>
                <div id="step-4" class="">
                    <h2>Terms and Conditions</h2>
                    <p>
                        Terms and conditions: Keep your smile :)
                    </p>
                    <div id="form-step-3" role="form" data-toggle="validator">
                        <div class="form-group">
                            <label for="terms">I agree with the T&C</label>
                            <input type="checkbox" id="terms" data-error="Please accept the Terms and Conditions" required>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>


                </div>
            </div>
        </div>

        </form>

在此先感谢您的帮助。

Answer 1

也尝试在代码中添加它，这在我的项目中有效。

showStepURLhash：错误

Answer 2

在初始化智能向导时添加showStepURLhash: false将解决滚动问题。

由于智能向导导致的问题创建在URL中添加了组件的ID，并且浏览器一如既往地将页面滚动到该ID元素

修复为：

    (function($) {
  // Função do smartwizard
  $(document).ready(function() {
    // Toolbar extra buttons
    if ($("#smartwizard").length == 0) return; // cancela função se nao achar o wizard
    $("#smartwizard").smartWizard({
      theme: "arrows",
      useURLhash: false,
      showStepURLhash: false
    });
  });
})(jQuery);

jQuery Smart Wizard删除自动滚动

2 个答案: