javascript - 索引页不会在页面顶部打开,而是直接在页面表单上打开

标签 javascript java jquery html xcode

我有一个问题,我创建了一个带有多步骤联系表单的索引。唯一的问题是,当我从移动设备加载页面时,它直接在联系表单上打开,并且通常不会在顶部打开。谢谢大家。

我希望我已正确附加代码。如果您需要其他文件或不同的代码,请告诉我,非常感谢!

/*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() 的调用。

关于javascript - 索引页不会在页面顶部打开,而是直接在页面表单上打开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59628075/

相关文章:

javascript - 防止在输入字段中运行JS代码,然后由JS添加

Java Applet 隐藏状态栏 Appletviewer

php - 针对很少更新的数据的策略

javascript - 将 javascript 代码内的文本 attr 更改为 "readonly false"

javascript - 如何使用 jQuery 检查表中是否存在第二个 tr

javascript - CSS 过渡不向后工作

java - 无法从 Java 独立项目中的 ATL EMFTVM 转换读取模块

java - 将嵌套类放在单独的文件中

javascript - 使用 javascript 将行追加到 html 表

javascript - 如何从js发送数据而不保留当前url?