我有一个问题，我创建了一个带有多步骤联系表单的索引。唯一的问题是，当我从移动设备加载页面时，它直接在联系表单上打开，并且通常不会在顶部打开。谢谢大家。
我希望我已正确附加代码。如果您需要其他文件或不同的代码，请告诉我，非常感谢!
/*jQuery.validator.setDefaults({
debug: false,
success: "valid"
});
$("#myform").validate({
rules: {
field: {
required: true,
}
}
});*/
$(document).ready(function() {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function(e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function() {
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for (var i = 0; i < curInputs.length; i++) {
if (!curInputs[i].validity.valid) {
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-primary').trigger('click');
});body {
margin-top: 40px;
}
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Vaimenu.it | Registra il tuo locale</title>
<!-- Custom fonts for this theme -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- Theme CSS -->
<link href="css/freelancer.min.css" rel="stylesheet">
<link href="css/speeder.css" rel="stylesheet" type="text/css">
</head>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger logo" href="#page-top" ><p class="text-lowercase"><img src="img/vaimenu.png" width="40" height="40" alt=""/> www.vaimenu.it</p></a>
<button class="navbar-toggler navbar-toggler-right text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Masthead -->
<body id="page-top">
<header class="primasection">
<div class="container-fluid col-md-4 offset-md-1 supe" style="float: left; -webkit-box-shadow: 4px 5px 15px #000000; box-shadow: 4px 5px 15px #000000;">
<h1 class="text-danger ">Fai diventare il tuo locale un punto di riferimento!</h1>
<h3>Hai un locale e vorresti fare più eventi?</h3>
<h3 >I clienti, che cercheranno nelle vicinanze un menu ideale per il proprio evento, troveranno il <strong><em>tuo locale!</em></strong> E se non hai tempo, inseriremo noi i tuoi menu grauitamente!</h3>
<h4 class="text-danger">*Nessuna commissione e nessun costo nascosto!</h4>
</div>
</head>
<div class="container-fluid col-xl-3 col-lg-6 col-md-7 offset-lg-1 " style="float: left; margin-top: 72px;">
<div class="container form">
<div class="stepwizard">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
<a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a>
<p>Locale</p>
</div>
<div class="stepwizard-step">
<a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
<p>Indirizzo</p>
</div>
<div class="stepwizard-step">
<a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
<p>Immagini</p>
</div>
</div>
</div>
<form role="form" id="myform" action='/save'>
<div class="row setup-content" id="step-1">
<div class="col-12">
<div class="col-md-12">
<h3> Inserisci il tuo locale</h3>
<div class="mb-3">
<div class="form-group was-validated">
<label class="control-label ">Nome del locale</label>
<input minlength="4" type="text" class="form-control" name="name" placeholder="nome del tuo locale" required/>
<div class="valid-feedback">
Bel nome!
</div>
</div>
</div>
<div class="form-group was-validated">
<label class="control-label">Email del tuo locale</label>
<input type="email" class="form-control" placeholder="tuoristorante@mail.com" required />
<div class="valid-feedback">
Perfetto!
</div>
</div>
<div class="form-group was-validated" >
<label class="control-label">Numero di telefono del locale</label>
<input type="number" class="form-control" name="fatt_txt_reg_telefono" placeholder="numero del tuo locale" required />
<div class="valid-feedback">
I clienti ti troveranno a questo numero !
</div>
</div>
<button class="btn btn-warning nextBtn btn-lg fa-pull-right" type="confirm">Avanti<img src="img/arrow-right.svg"></button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-12">
<div class="col-12">
<h3> Indirizzo</h3>
<div class="row">
<div class="form-group was-validated col-8">
<label class="control-label ">Indirizzo</label>
<input type="text" class="form-control" name="indirizzo" placeholder="Indirizzo" required />
</div>
<div class="form-group was-validated col-4">
<label class="control-label ">N.</label>
<input type="text" class="form-control " name="civico" placeholder="numero" required />
</div>
</div>
<div class="form-group was-validated ">
<label class="control-label">Città</label>
<input maxlength="200" type="City" class="form-control" name="citta" placeholder="Città" required />
</div>
<div class="form-group was-validated ">
<label class="control-label">Provincia</label>
<select id="provincia" name="provincia" maxlength="200" type="text" class="form-control" placeholder="Provincia" required />
</div>
<div class="form-group was-validated">
<label class="control-label">CAP</label>
<input maxlength="200" type="CAP" class="form-control" name="fatt_txt_reg_cap" placeholder="CAP" required />
</div>
<button class="btn btn-warning nextBtn btn-lg fa-pull-right" type="confirm">Avanti<img src="img/arrow-right.svg"></button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-12">
<div class="col-md-12">
<h3> Inviaci i tuoi menu! </h3>
<h6>Scatta una foto a 2 menu che proponi per gli eventi nel tuo locale, Ti creeremo un pannello di controllo personalizzato e Penseremo a tutto noi!</h6>
<hr>
<div class="form-group was-validated ">
<label class="control-label">Menu1</label>
<input type="file" required>
</div>
<div class="form-group was-validated ">
<label class="control-label">Menu2</label>
<input type="file" required>
<hr>
<div class="form-group was-validated ">
<div class="custom-control custom-checkbox mb-3" >
<input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
<label class="custom-control-label" for="customControlValidation1" ><small>Dichiaro di aver letto, accettato e di concordare con le <a href="https://www.google.it/" target="_blank" >Clausole Generali e l'Informativa sulla privacy.</a> Vaimenu.it permette ai locali e agli ospiti di comunicare tramite Vaimenu.it, che riceve ed elabora le comunicazioni in conformità con l'Informativa sulla privacy e le Clausole Generali di Vaimenu.it.</small></label>
</div>
<div class="form-group was-validated ">
<div class="custom-control custom-checkbox mb-3" >
<input type="checkbox" class="custom-control-input" id="customControlValidation2" checked>
<label class="custom-control-label" for="customControlValidation2" ><small>Voglio iscrivermi alla newsletter per ricevere promozioni ed altre comunicazione da parte di vaimenu.it</small></label>
</div>
<button class="btn btn-success btn-lg fa-pull-right" type="submit">Finito!<img src="img/star.svg" style="top: auto"></button>
</div>
</div>
</form>
</div>
</div>
</section>
</section>
</header>请您参考如下方法:
根据您的代码，发生这种情况的原因有两个。第一个是您在 URL 中包含一个片段，例如。 yourdomain.com/page#myform。如果片段与 DOM 中某个元素的 id 匹配，那么当页面加载时，它将滚动到该元素。要停止这种情况，请删除片段或更改元素的 id。
此外，您还在 input 元素上调用 focus()。这会将插入符号设置到字段中，并将其滚动到 View 中。如果您不希望发生这种情况，请删除对 focus() 的调用。
