跳转到表单的页面顶部提交到新页面答案

【问题标题】：Jump to top of page on form submit to new page跳转到表单的页面顶部提交到新页面
【发布时间】：2015-11-16 11:51:10
【问题描述】：

我在 PHP 页面上有一个表单：

<form name="SendEmail01" method="post">
    form items here...
</form>

然后我像这样处理它：

if(isset($_POST["Submit"]))
{
All tasks here...
$thanks_redirect = 'http://' . $_SERVER["SERVER_NAME"] . '/thanks.php#top';
header("location: $thanks_redirect");
}

问题是处理页面上的提交按钮在页面上非常低，当我按下“提交”时，所有处理都正确并正确跳转到Thanks.php页面，但页面停留在同一位置它看起来只是一个空白页面（除非用户向上滚动）。

我已经尝试过 Javascript 和 HTML 超链接，例如 #top，但它不会跳回页面顶部，在thanks.php 页面上，它说它已被正确处理。

谁能帮助我在处理完表单后如何让thanks.php页面滚动回页面顶部？

编辑：我在thanks.php页面上有这个，用户在提交时被重定向：

<html>
<head>
<script type="text/javascript">
var lockit=setInterval("window.scrollTo(0,0)",10)
</script>
<style>
form {
    display: inline;
}
input
{
color: #000000;
background: #ffffff;
border: 1px solid #000000;
padding: 4px;
font-size:13px;
font 
}
#submit {
 color: #000000;
 font-size: 13px;
 width: 110px;
 height: 30px;
 border: 1px solid #000000;
 margin: 0;
 padding: 0;
 background: #66ff66 url(image) 0 0 no-repeat; 
}
#buttons {
 color: #000000;
 font-size: 13px;
 width: 80px;
 height: 25px;
 border: 1px solid #000000;
 margin: 0;
 padding: 0;
 background: #66ff66 url(image) 0 0 no-repeat; 
}
</style>

</head>
<body>
<script type="text/javascript">
$('html, body').animate({ scrollTop: 0 }, 'fast');
</script>
<?php
session_start();
$loggedin_user = $_SESSION['serial'];
$local_path = $_SESSION['local_path'];
$full_path = $_SESSION['full_path'];
?>
<font face="Verdana, Arial, Helvetica, sans-serif" color="black">

<form action="http://<?php echo $_SERVER["SERVER_NAME"]; ?>/login.php?log_out">
    <input type="submit" value="Logout" id="buttons">
</form>
<form action="<?php echo $full_path;?>index.php">
    <input type="submit" value="Go Back" id="buttons">
</form>
<p><b>Success!</p></b>
<p>Your changes have been submitted.. 

<p>Please note that not <u>all</u> changes are made in real-time, some changes may only be updated when the server checks for new configuration.</p>

</body>
</html>

谢谢。

【问题讨论】：

提交完全发送数据，所以你肯定不需要 uri 中的#top，让它做就行了 :)
正如 Sam 所说，无论如何它都应该显示在顶部，如果不是，那么我怀疑您的Thanks.php 页面上的 HTML 标记有问题。
你不需要做任何事情就可以到达顶部。只需重定向到任何页面，它就会始终显示在顶部。
thanks.php 页面中是否有任何输入框或 jquery 代码专注于该输入框？
谢谢，它不会跳到顶部，它只是在新页面的同一高度。

标签： javascript php html forms

【解决方案1】：

我会将此作为评论添加，但它有点太长了。

我制作了这个页面：

<!DOCTYPE html>
<html>
<head>
</head>

<body>

    <p>Calibri Text</p>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <form>
        <input type="submit" />
    </form>

</body>
</html>

在提交时，页面会跳转到顶部并重定向到另一个页面，因此您不应该遇到这个问题，除非您的 jQuery 中有一些东西给予了关注。

【讨论】：

【解决方案2】：

试试这个。

$('html, body').animate({ scrollTop: 0 }, 'fast');

您不需要任何custom divs。只需要一个简单的页面。

<html>
<head>
<title>Thanks Page</title>
</head>
<body>

Well Thanks bro!

</body>
</html>

【讨论】：