当前位置:首页>网站建设>Form表单提交返回或刷新页面后到原来提交的位置

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来存储在表单提交时的滚动位置。当页面加载时,如果存在保存的滚动位置,就会将页面滚动到那个位置。这样,用户在提交表单后,页面会返回到之前的滚动位置。

欢迎访问秀主题博客,分享简单实用WP教程

请注意,这只是一个基本示例。在实际项目中,你可能需要根据具体情况进行更多的定制和优化。此外,你需要将表单的action属性设置为实际的表单处理脚本的URL,并在服务器端处理表单数据。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
网站建设

简单的方法使用WordPress做多条件选择

2025-4-12 13:37:39

网站建设

WordPress 后台文章列表添加自定义列简单方法

2025-4-14 10:39:44

温馨提示:

1.本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:971318156@qq.com,我们将第一时间处理!

2.资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持。

3.所有资源仅限于参考和学习,版权归原作者所有,更多请阅读网站声明

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索