热搜词
要在表单提交后返回或刷新页面后滚动到原来提交的位置，你可以使用JavaScript来实现这个功能。以下是一个基本的示例，演示如何在表单提交后返回或刷新页面后滚动到原来提交的位置：
<!DOCTYPE html>
<html>
<head>
<title>表单提交后返回到原位置</title>
</head>
<body>
<h1>表单提交后返回到原位置</h1>
<! 创建一个简单的表单 >
<form id="myForm" action="your_form_processing_script.php" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="提交">
</form>
<! 在页面底部添加一个占位符元素 >
<div id="scrollToHere"></div>
<script>
// 当表单提交时，记录当前滚动位置
document.getElementById('myForm').addEventListener('submit', function () {
sessionStorage.setItem('scrollPosition', window.scrollY);
});
// 在页面加载时，检查是否有要恢复的滚动位置，并滚动到该位置
window.addEventListener('load', function () {
var scrollPosition = sessionStorage.getItem('scrollPosition');
if (scrollPosition) {
window.scrollTo(0, scrollPosition);
sessionStorage.removeItem('scrollPosition'); // 清除保存的滚动位置
}
});
</script>
</body>
</html>这个示例中，我们使用了sessionStorage来存储在表单提交时的滚动位置。当页面加载时，如果存在保存的滚动位置，就会将页面滚动到那个位置。这样，用户在提交表单后，页面会返回到之前的滚动位置。
请注意，这只是一个基本示例。在实际项目中，你可能需要根据具体情况进行更多的定制和优化。此外，你需要将表单的action属性设置为实际的表单处理脚本的URL，并在服务器端处理表单数据。
