PHP/CSS : Postback form doesn't reload back to same position on page (Scrolling required)

Question

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

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

我的目标是当你点击提交时页面会重新加载，但它会重新加载到我们在页面上的位置，这样用户(我的老师)就不必回滚来检查我是否返回了正确的结果。这不是类(class)要求，这只是我有点固执/试图让我的应用程序尽可能好。

工作网址: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

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

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