javascript 当表单动作到同一页面时，保留页面位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15019360/
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
When form action to same page, retain page position?
提问by jakecraige
On my current project, the user clicks on "Save Changes" on what they are editing, and it is further down the page where the edit box, saved text, etc... pops up. Is there a way I can have the site retain its page location in order to auto-scroll them back down to where they clicked edit?
在我当前的项目中，用户在他们正在编辑的内容上单击“保存更改”，然后在页面下方，编辑框、保存的文本等会弹出。有没有办法让网站保留其页面位置，以便将它们自动滚动回他们单击编辑的位置？
Ideally I'd have some type of solution where the page wouldn't have to reload but I don't know how to do that, lol.
理想情况下，我有某种类型的解决方案，页面不必重新加载，但我不知道该怎么做，哈哈。
My site is coded in PHP.
我的网站是用 PHP 编码的。
Thanks
谢谢
采纳答案by sjdaws
You might want to have a look at some tutorials on how to save a form via AJAX. This will mean you aren't POSTing the page, and therefore it won't refresh and the user won't lose their position on the page.
您可能想查看一些有关如何通过 AJAX 保存表单的教程。这意味着您没有发布页面，因此它不会刷新，用户也不会失去他们在页面上的位置。
http://www.jstiles.com/Blog/How-To-Submit-a-Form-with-jQuery-and-AJAX
http://www.devblog.co/easy-jquery-ajax-php-contact-form/
http://www.jstiles.com/Blog/How-To-Submit-a-Form-with-jQuery-and-AJAX
http://www.devblog.co/easy-jquery-ajax-php-contact-form /
回答by K D
There is one functionality in Html to position your page with the help of using (#).
Html 中有一项功能可以在使用 (#) 的帮助下定位您的页面。
For example considering the following scenario where your Edit button resides
例如，考虑您的编辑按钮所在的以下场景
<div id="editButton">
<input type="button" name="Edit" value ="Edit"/>
</div>
If your page name is "index.php" and you redirect with url : "index.php#editButton"Your page will automatically scroll to that section without much efforts.
如果您的页面名称是“index.php”并且您使用 url 重定向：“index.php#editButton”您的页面将自动滚动到该部分而无需太多努力。
It identifies the id of the element and put the scroll up to that position.
它标识元素的 id 并将滚动到该位置。
Cheers
干杯
回答by Ales
I have simply put name of ID selector in form action:
我只是在表单操作中输入了 ID 选择器的名称：
<form class="form-horizontal" method="post" action="#regform">
And it works for me.
它对我有用。
回答by Karma
Yes, it is good to have that approach.
是的，采用这种方法很好。
Rather than complete redirection, only a chunk of data should be sent over and uploaded accordingly.
与其完全重定向，不如只发送一大块数据并相应地上传。
For this, you need http://www.w3schools.com/ajax/default.ASP
为此，您需要http://www.w3schools.com/ajax/default.ASP
then, learn jQuery (hope you familiar with what is an id and class in CSS)...
然后，学习jQuery（希望你熟悉CSS中的id和class是什么）...
http://api.jquery.com/jQuery.ajax/
http://api.jquery.com/jQuery.ajax/
Cool?
凉爽的？
回答by Buksy
If you have multiple forms on one page, you could add nameattribute of that form to link. e.g.
如果您在一个页面上有多个表单，您可以name将该表单的属性添加到链接中。例如
<form name="my-form1" action="form.php#my-form1">
I guess this should work.
我想这应该有效。
Another way is to consider using Ajax, so you dont have to reload page at all, or you can create javasscript function that will be called on form submit and will add current page position in hidden input. After page reload, you can scroll to original position using value from that hidden input.
另一种方法是考虑使用 Ajax，因此您根本不必重新加载页面，或者您可以创建将在表单提交时调用的 javascript 函数，并将在隐藏输入中添加当前页面位置。页面重新加载后，您可以使用该隐藏输入中的值滚动到原始位置。
回答by OakNinja
Yes, use Ajax to update the page partially. This is the way to do it in any web technology.
是的，使用 Ajax 部分更新页面。这是在任何网络技术中都能做到的。
