PHP/CSS：回发表单不会重新加载回页面上的相同位置（需要滚动）

Question

这里的新手还没有找到他们可以理解的答案。

我已经建立了一个小的回发网络，它将 celcius 转换为 ferinheight，反之亦然，在提交时，页面重新加载到页面顶部，而不是保持固定在我们当前关注的位置，这似乎是糟糕的用户设计，即使只有我自己和我的老师才能证明我能够制作 php 应用程序。

我的目标是，当您单击提交时，页面将重新加载，但它会重新加载到我们在页面上的位置，因此用户（我的老师）不必向后滚动查看我是否返回正确的结果。这不是课程要求，这只是我有点固执/试图使我的应用程序尽可能好。

工作网址：http://school.max-o-matic.com/itc250.php（单击右下角的箭头可以转到转换器或直接滚动到页面底部）。

这是我的代码：

<div id="010" class="container">
<h2>e01: Temperature Converter</h2>
<p class="lead">
    &ldquo;It doesn't matter what temperature the room is, it's always room temperature.&rdquo;<br />- <a href="http://www.brainyquote.com/quotes/authors/s/steven_wright.html">Steven Wright</a>, Comedian.
</p>
</div>

<div class="background-white">
<div class="container">
    <h3 id="010">&ordm;Fahrenheit to &ordm;Celsius.</h3>
    <div class="experience row">
        <div class="col-md-4">
            <!--<h4>Any Reason to Exist?</h4>-->
            <p class="experience-period">
                Build a PHP application that will:
                <ul>
                    <li>Post back to itself</li>
                    <li>Convert Fahrenheit to Celsius</li>
                    <li>Convert Celsius to Fahrenheit</li>
                </ul>
                </p>
        </div>
        <div class="col-md-8">
            <p>
                <?php
                /* everything submitted comes back as a string we are concerned with 'name' as it is what comes back */
                    if (isset ($_POST['submit'])){//data is subnmitted, show it
                        //$myTemp = (int)$_POST['myTemp'];// make it an int
                        $myTemp = (float)$_POST['myTemp'];// float more forving

                        $F = $myTemp  *  9/5 + 32;
                        $C = $myTemp  *  9/5 - 32;

                        #need to declare the selection, then we can compare to it
                        $myFilter = $_POST['myFilter'];

                        if ($myFilter == 'f'){echo "<b>" . $F . "&ordm; ferinheight</b><br />";}
                        if ($myFilter == 'c'){echo "<b>" . $C . "&ordm; Celcius</b><br />";}

                        }else{
                    ?>
                    <form action="itc250.php" method="post">
                        <input type="text" name="myTemp" placeholder="Enter value to convert" />
                         &nbsp;  &nbsp; &nbsp;

                        <select input type="text"  name="myFilter">
                          <option value="f">Convert C&ordm; to F&ordm;</option>
                          <option value="c">Convert F&ordm; to C&ordm;</option>
                        </select>
                        <br /><br />
                        <input type="submit" name="submit" /> <!--purposely blurred -->
                    </form>
                    <?php
                         }
                    ?>

                <br />
                <span class="hidden-phone">
                    <strong>Helpful Hint:</strong> As the form is 'included' with this document, it must specify this doc instead of itself.
                    <br /><br />
                    <strong>Question:</strong> I don't understand why i needed to declare 'myFilter', i thought that that would be carried with the $_POSTED info.
                    </span>
                </span>
            </p>

        </div>
    </div>
</div>
</div>

Answer 1

您可以使用井号 (#) 将表单提交给锚点。所以 www.myurl.com/mypage.php#myanchor

`#myanchor 是相对于页面上某个元素的 ID。因此，如果您有一个 ID 为 #answer 的 div，只需将 URL 设置为 www.myurl.com/mypage.php#answer

来源http://www.w3schools.com/html/html_links.asp

Answer 2

在您希望页面滚动到的元素上设置一个 id。然后在<form action> 的 URL 中引用 id 作为锚点：

<form action="itc250.php#myid">