Question

我试图做一些奇特的事情。我已成功编写代码，以便在填写小表单并单击提交按钮时显示数据库中的结果。结果显示在表单下方。但是我觉得如果页面自动向下滚动到包含填充表单结果的div会很好。我想我必须使用jquery或ajax。由于我对它们一无所知，因此我在互联网上搜索了粘贴代码的副本。但它们都不起作用。

当点击提交按钮时，页面将重新加载以从数据库中获取结果。当页面从网络重新加载时，我已经获得了向下滚动到div的代码，但问题是......即使你滚动也是如此未单击提交按钮。因此，有人可以仅在单击提交按钮时以及在重新加载页面之后将代码滚动到div。

代码是这样的

<form name="searchdonor" action="" id="form" method="POST" align="center" enctype="application/x-www-form-urlencoded">  
--- ------ ------  
--- ------ ------  
--- ------ ------

</form>  
<input type="submit" name="submit" id="submit" value="Submit"  onclick="return(searchval()); "> 
//the div i want to scroll down is below one 
<div class="col-sm-8" id="what">
</div>

这里是html和php-mysqli中的完整代码

<div class="col-sm-4">
         <h1 class="register-title">Search a Donor</h1>
              <div id="wrapper">
              <div id="chatbox">
      <form name="searchdonor" action="" id="form" method="POST" align="center" enctype="application/x-www-form-urlencoded">
        <table id="results">
                <tr><td><h4>Country:</h4></td><td>&nbsp&nbsp&nbsp&nbsp&nbsp
                 <select id="slct1" name="country" onchange="populate1(this.id,'slct2')">
                  <option value="">--Select--</option>
                  <option value="India">India</option>
                 </select></td></tr>
                <tr><td><h4>State:</h4></td><td>&nbsp&nbsp&nbsp&nbsp&nbsp
                 <select id="slct2" name="state" onchange="populate2(this.id,'slct3')">
                  <option value="">--Select--</option>
                 </select></td></tr>
                <tr><td><h4>District:</h4></td><td>&nbsp&nbsp&nbsp&nbsp&nbsp
                 <select id="slct3" name="district" onchange="populate3(this.id,'slct4')">
                  <option value="">--Select--</option>
                 </select></td></tr>
                <tr><td><h4>City:</h4></td><td>&nbsp&nbsp&nbsp&nbsp&nbsp
                 <select id="slct4" name="city">
                  <option value="">--Select--</option>
                 </select></td></tr>
                <tr><td><h4>Blood group:</h4></td><td>&nbsp&nbsp&nbsp&nbsp&nbsp
                 <select name="bloodgroup">
        <option value="">--Select--</option>
        <option value="A+">A+</option>
        <option value="A-">A-</option>
        <option value="B+">B+</option>
        <option value="B-">B-</option>
        <option value="O+">O+</option>
        <option value="O-">O-</option>
        <option value="AB+">AB+</option>
        <option value="AB-">AB-</option>
                </select></td></tr>

      </form>
      </table><br />

    <input type="submit" name="submit" id="submit" value="Submit"  onclick="return(searchval());">
    </div>


              </div>
         </div>

         <div class="col-sm-2">
         </div>
     </div>
     <div class="dropdownwrap">
     <?php 
     if(isset($_POST['submit'])){

              $country=$_POST['country'];
              $state=$_POST['state'];
              $district=$_POST['district'];
              $city=$_POST['city'];
              $bloodgroup=$_POST['bloodgroup'];
              ?>
     <div class="row"><br />
        <div class="col-sm-2">
        </div>
        <div class="col-sm-8" id="what">
        <a class="what"></a>
        <?php echo "<h4 align='center'> Donors in <b>".$city."</b> for <b>".$bloodgroup."</b> are</h4>";?>
        </div>
        <div class="col-sm-2">
        </div>
     </div>
       <div class="row">
        <div class="col-sm-2">
        </div>
        <div class="col-sm-8">
          <div class="table-responsive">

           <table id="tablepaging" class="table" align="center">
            <thead><hr />
             <tr>
                <th><b>Full Name</b></th>
                <th><b>Contact Number</b></th>
             </tr>
            </thead>
            <tbody>
              <?php 


              $connect = mysqli_connect('localhost', 'root', '', 'blood'); if (mysqli_connect_errno()) echo "Failed to connect to MySQL: " . mysqli_connect_error();
              $query="SELECT * FROM users WHERE country='$country' && state='$state' && district='$district' && city='$city' && bloodgroup='$bloodgroup' && activity='available'";
              $result=mysqli_query($connect,$query) or die('Error, query failed');
              mysqli_close($connect);
              if (mysqli_num_rows($result) == 0) {
              echo"<h3 align=\"center\">Sorry, No Donors Found</h3>";
              }
              elseif($result)
              {
              while ($row = mysqli_fetch_array($result)){

              echo"<tr>";
              echo"<td>".$row["firstname"]."&nbsp".$row["lastname"]."</td>";
              echo"<td>".$row["phonenumber"]."<br />".$row["secondnumber"]."</td>";
              }
              echo"</tr>";

              }}
              ?>
            </tbody>
           </table>
            <div id="pageNavPosition" align="center"></div>
          </div>
         </div>



         <div class="col-sm-2">
         </div>


</div>       

</div>

</div>

Answer 1

您可以在网址中使用锚点。

或者，如果您想要一个平滑的动画，只需在if(isset($_POST['submit']))条件下插入JS代码即可。这样，只有在单击提交按钮并重新加载页面时才会进行滚动。

我还建议你使用$(function() { /**/ }); jQuery语法，这样只有在加载DOM时才会发生滚动。

<?php

if(isset($_POST['submit']))
{

    //[...]
    //sql query and display
    //[...]

    ?>
    <script>
        $(function() {
            $('html, body').animate({
                scrollTop: $("#myDiv").offset().top
            }, 2000);
         });
    </script>
    <?php

}

?>

滚动到特定div的代码： Smooth scroll to div id jQuery

Answer 2

$("#btn").click(function() {
   scrollDiv = $("#what");
   $(window).scrollTop(scrollDiv.offset().top).scrollLeft(scrollDiv.offset().left);
});

Answer 3

我希望这段代码有效：

         <script>
           $(':submit').click(function(){
             $.ajax({
               type: "POST",
               dataType:'text',
               data:someData,
               url:" the address of your function"
               success: function() {
                // some code to show your result inside div
               $('html, body').animate({
                  scrollTop: ($('#what').offset().top )
                  }, 200);                   
                }//success
              });//ajax
            });//click
         </script>

如何在单击提交按钮后重新加载页面后滚动到特定div？

3 个答案: