j查询智能向导删除自动滚动

Question

我正在尝试使用 jQuery 智能向导 4 创建一个多步骤表单，但由于某种原因，当加载我的网站时，表单向导的第一步获得焦点并且页面滚动到它，最后哈希 #step-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： false

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