输入输入内容时，页面会在移动设备上向上滚动？

Question

我正在创建一个一页网站，每个部分占用整个视口的高度和宽度（100vw和100vw），对于移动屏幕，我使用媒体查询来调整高度，以使内容适合，问题是，一个部分有一个表单，当用户键入输入时，页面是向上滚动还是向下滚动？

我不知道为什么会这样？

此表单的HTML是：

    <section id="quote">
    <div id="ugallerys" class="uparrow"><img class="centerimage img-responsive" src="images/up.png" />
    </div>
    <div class="box">
        <div class="fwidth container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div id="contentquote">
                        <form method="POST" id="quoteform">
                            <div class="form centerfield">
                                <div class="heading white lesspace">Quote</div>
                                <hr>
                                <label for="Full Name">
                                    <h4 class="white center">Full Name</h4>
                                </label>
                                <input type="text" class="form-control centerfield lwidth" id="name" onFocus="window.scrollTo(0, 0);" name="name" placeholder="e.g Tom Jones" />
                                <br />
                                <div class="centerfield lwidth">
                                    <label for="Book Out Date">
                                        <h4 class="white">Pickup Date</h4>
                                    </label>
                                    <input type="date" class="form-control" onFocus="window.scrollTo(0, 0);" id="bookoutdate" name="bookoutdate" />
                                </div>
                                <div class="centerfield lwidth">
                                    <label for="Book In Date">
                                        <h4 class="white">Dropoff Date</h4>
                                    </label>
                                    <input type="date" class="form-control" id="bookindate" name="bookindate" />
                                </div>
                                <div class="centerfield lwidth">
                                    <h1><span id="days">0</span> Days</h1>
                                    <hr>
                                </div>
                                <div class="centerfield lwidth">
                                    <label for="Age">
                                        <h4 class="white">Age</h4>
                                    </label>
                                    <input type="number" class="form-control" placeholder="e.g. 18" id="age" name="age" />
                                </div>
                                <div class="centerfield lwidth">
                                    <label for="Email">
                                        <h4 class="white">Email</h4>
                                    </label>
                                    <input type="email" class="form-control" placeholder="e.g. tomjones@demo.com" id="email" name="email" />
                                </div>
                                 <div class="centerfield lwidth">
                                    <label for="Contact">
                                        <h4 class="white">Contact Number</h4>
                                    </label>
                                    <input type="number" class="form-control" placeholder="e.g. 03375664399" id="number" name="number" />
                                </div>
                                <div class="centerfield lwidth">
                                    <label for="Comments">
                                        <h4 class="white">Comments</h4>
                                    </label>
                                    <textarea class="form-control" id="comments" name="comments"></textarea>
                                </div>
                                <div class="toppadding centerfield">
                                    <input type="submit" class="btn btn-success btn-lg" value="Send" name="submit" />
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div id="dcontact" class="downarrowsp3"><img class="centerimage img-responsive" src="images/down.png" />
    </div>
</section>

本节的CSS是：

    #quote {
    height: 210vh !important;
    overflow:hidden;
    width: 100vw !important;
    background-color: #000000;
    margin:0px !important;
    padding:0px !important;
    }  

这是网站本身的链接： http : //www.a1phantom.com/

Answer 1

在您的文本字段上，您将执行以下操作

<input type="text" class="form-control centerfield lwidth" id="name" 
onfocus="window.scrollTo(0, 0);" 
name="name" placeholder="e.g Tom Jones">

属性onfocus="window.scrollTo(0, 0);" 使您的页面滚动到文本字段的焦点上