提交表单后，如何防止页面跳动？

Question

我使用的是Shopify主题，该主题已根据需要进行编辑。 我选择将新闻通讯订阅表单从页面底部移至顶部，以便将其嵌入英雄图像中。 当用户提交表单时，页面跳至底部（表单以前位于该位置）。 以下是网站和表单代码。

www.hoo-gah.co.uk

<div class="signup-form">
           {% if settings.footer_signup_action == empty %}
               {% form 'customer' %}
             {% if form.posted_successfully? %}
               <h4>{{ 'layout.signup.post_success' | t }}</h4>
               <script>window.scroll(0,1000000)</script>
             {% else %}
                   <input type="hidden" id="contact_tags" name="contact[tags]" value="prospect,newsletter"/>
                   <span class="input-block">
                     <input type="email" placeholder="{{ 'layout.signup.email' | t }}" class="required" value="" id="mailinglist_email" name="contact[email]" /><input class="compact" type="submit" value="Subscribe" />
                   </span>
             {% if form.errors %}
                   {% for field in form.errors %}
                   <p class="error">{{ field | capitalize }} - {{ form.errors.messages[field] }}</p>
                   {% endfor %}
             {% endif %}
            {% endif %}
           {% endform %}
           {% else %}
           <form action="{{ settings.footer_signup_action }}" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
            <span class="input-block hero-input">
              <input type="email" class="required email" placeholder="{{ 'layout.signup.email' | t }}" value="" id="mce-EMAIL" required name="EMAIL" /><input class="compact" type="submit" name="subscribe" value="Subscribe" />
            </span>
           </form>
          {% endif %}
</div>

我以为window.scroll（0,1000000）行会对此负责，但是即使删除行或将值更改为（0,0）时，屏幕仍会在提交时跳转，所以我想知道这是否被某个地方覆盖。

如果有人对如何使页面滚动到顶部而不是底部有任何想法，将不胜感激。

谢谢你的时间！

Answer 1

从表单元素中的action="/contact#contact_form"中删除#contact_form ，生活将再次美好。

#contact_form告诉浏览器滚动到该表单。删除该表单不会有其他影响。

为了清楚起见，这是要更改的形式：

<form method="post" action="/contact#contact_form" id="contact_form" class="contact-form" accept-charset="UTF-8"><input type="hidden" value="customer" name="form_type"><input type="hidden" name="utf8" value="✓">

                       <input type="hidden" id="contact_tags" name="contact[tags]" value="prospect,newsletter">
                       <span class="input-block">
                         <input type="email" placeholder="Enter your email..." class="required" value="" id="mailinglist_email" name="contact[email]"><input class="compact" type="submit" value="Subscribe">
                       </span>


                       <p class="error">Email - can't be blank</p>



                </form>

应该：

<form method="post" action="/contact" id="contact_form" class="contact-form" accept-charset="UTF-8"><input type="hidden" value="customer" name="form_type"><input type="hidden" name="utf8" value="✓">

                       <input type="hidden" id="contact_tags" name="contact[tags]" value="prospect,newsletter">
                       <span class="input-block">
                         <input type="email" placeholder="Enter your email..." class="required" value="" id="mailinglist_email" name="contact[email]"><input class="compact" type="submit" value="Subscribe">
                       </span>


                       <p class="error">Email - can't be blank</p>



                </form>

Answer 2

我知道这很旧，但是今天我遇到了同样的问题。 我必须回答，因为我还不能发表评论。 另外，基于O_Z答案：

您应该替换这段代码：

 {% form 'customer' %}

通过这个

{% form 'customer', action:'/contact' %}

我猜那是正确的方法。 Shopify中没有很好地记录（或根本没有记录），但是您可以直接从html文件中添加元素（动作，类，数据类型等），就像上面的示例一样。 就我而言，提交表单后，默认情况下页面位于顶部，并且不再滚动。