Form表单提交返回或刷新页面后到原来提交的位置
要在表单提交后返回或刷新页面后滚动到原来提交的位置,你可以使用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,并在服务器端处理表单数据。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
仍然有问题? 我们要如何帮助您?