javascript 单击提交按钮时，如何在重新加载页面后滚动到特定的 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32887066/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to scroll to a particular div after reloading the page when the submit button is clicked?
提问by lancelot
Iam trying to do something fancy. I have successfully written code to show results from database when a small form is filled and submit button is clicked.The results are shown right under the form. But I feel it would be nice if the page is automatically scrolled down to the div containing the results for the filled form. I suppose i have to use jquery or ajax for that. Since I have no knowledge in them I searched the internet for copy pasting the code. But none of them works.
我正在尝试做一些花哨的事情。我已经成功地编写了代码，当填写一个小表单并点击提交按钮时，可以显示数据库中的结果。结果显示在表单正下方。但我觉得如果页面自动向下滚动到包含已填写表单结果的 div 会很好。我想我必须为此使用 jquery 或 ajax。由于我对它们一无所知，因此我在互联网上搜索了复制粘贴代码。但它们都不起作用。
When the submit button is clicked,the page will reload to fetch results from database.I have got the code for scrolling down to a div when page reloads from net,but the problem with that is..the scrolling happens even thou submit button is not clicked. So can someone gimme the code for scrolling down to a div only when the submit button is clicked and after when the page is reloaded.
当提交按钮被点击时，页面将重新加载以从数据库中获取结果。当页面从网络重新加载时，我有向下滚动到 div 的代码，但问题是......即使你提交按钮，滚动也会发生没有点击。因此，只有在单击提交按钮时以及在重新加载页面之后，才能提供向下滚动到 div 的代码。
the code is something like this
代码是这样的
<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>
here's the complete code in html and php-mysqli
这是 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>     
<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>     
<select id="slct2" name="state" onchange="populate2(this.id,'slct3')">
<option value="">--Select--</option>
</select></td></tr>
<tr><td><h4>District:</h4></td><td>     
<select id="slct3" name="district" onchange="populate3(this.id,'slct4')">
<option value="">--Select--</option>
</select></td></tr>
<tr><td><h4>City:</h4></td><td>     
<select id="slct4" name="city">
<option value="">--Select--</option>
</select></td></tr>
<tr><td><h4>Blood group:</h4></td><td>     
<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"]." ".$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>
回答by Lord Grosse Jeanine
You can use an anchor in the URL.
您可以在 URL 中使用锚点。
Or, if you want a smooth animation, just insert the JS code in the if(isset($_POST['submit']))condition. This way, the scroll will happen only when the submit button is clicked and the page reloads.
或者，如果你想要流畅的动画，只需在if(isset($_POST['submit']))条件中插入 JS 代码。这样，只有在单击提交按钮并重新加载页面时才会发生滚动。
I also suggest you use the $(function() { /**/ });jQuery syntax so the scroll happens only when the DOM has been loaded.
我还建议您使用$(function() { /**/ });jQuery 语法，以便仅在加载 DOM 时才会发生滚动。
<?php
if(isset($_POST['submit']))
{
//[...]
//sql query and display
//[...]
?>
<script>
$(function() {
$('html, body').animate({
scrollTop: $("#myDiv").offset().top
}, 2000);
});
</script>
<?php
}
?>
Code for scrolling to a specific div found here: Smooth scroll to div id jQuery
滚动到特定 div 的代码在这里找到： Smooth scroll to div id jQuery
回答by lancelot
$("#btn").click(function() {
scrollDiv = $("#what");
$(window).scrollTop(scrollDiv.offset().top).scrollLeft(scrollDiv.offset().left);
});
回答by Mahdi Younesi
I hope this code works:
我希望这段代码有效：
<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>
