禁用POST上的滚动
Disabling scrolling on POST
我有一个使用POST从mySQL检索数据的页面。然而,这是令人恼火的,因为如果我向下滚动并单击某个执行POST的东西,它会将页面踢回到顶部。有人知道一些javascript/jquery插件,可以解决这个问题吗?
如果您使用AJAX POST并将页面的内容替换为AJAX POST的结果,则此滚动效果将不会成为问题。
请记住,此操作对用户来说可能是无缝的(没有浏览器加载)。
假设你有一个表单:
<form id="some_form" action="myphp.php">
<input name="something" value="foo"/>
<input name="something_else" value="bar" />
</form>
和jQuery:
$("#some_form").submit(function() {
var url = $(this).attr("action");
var form_data = $(this).serialize();
// post the same data via an AJAX call
$.post(url, form_data, function(data) {
// replace the contents from the received response
$("html").html(data);
});
// disable the default form submit behavior
return false;
});
你试过跳转内页吗?
和另一个例子如何链接到页面上的特定位置
<div id="whatever-you-want-to-call-it">
The content of your div here.
</div>
和到达该点的url
http://www.pagename.html#whatever-you-want-to-call-it
尝试使用scrollTop
:
$("#some_form").submit(function() {
var url = $(this).attr("action");
var form_data = $(this).serialize();
var currentScrollTop = $('body').scrollTop();
// post the data via an AJAX call
$.post(url, form_data, function(data) {
// replace the contents from the received response
$(document).html(data);
$('body').scrollTop(currentScrollTop);
});
// disable the default form submit behavior
return false;
});
使用e.p preventdefault ();使用jQuery(像Uku Loskit建议的那样)。他的代码中也有一个错误(它不会工作),所以我修复了它。
下面是他修改后的代码:
<form id="some_form" action="myphp.php"">
<input name="something" value="foo"/>
<input name="something_else" value="bar" />
</form>
和jQuery:
$("#some_form").submit(function(e) { // e = event object, it has many usefull properties and methods
e.preventDefault();
var url = $(this).attr("action");
var form_data = $(this).serialize();
// post the same data via an AJAX call
$.post(url, form_data, function(data) {
// replace the contents from the received response
$(document).html(data);
});
});
顺便说一下,没有办法如何实现没有javascript,如果你想留在同一个页面(不要重新加载,不要改变url)。如果它像分页一样使用,那么你可以在url后面添加#some-id,然后在页面加载时应该在顶部的item中添加id' some-id'。
相关文章:
- 如何使用WCF服务和javascript表单post上传.doc文件
- Jquery POST未填充数组
- 幻灯片滚动javascript不起作用
- 如何在php文件中获取$.post-ajax传递的值
- 将视口底部滚动到元素底部
- jQuery Lazy加载动画滚动
- 设置滑块分区上的滚动
- 在POST中将html表作为csv提交
- 结合jQuery和jetpack无限滚动
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- 滚动到容器中的下一个元素-几乎到了
- 只覆盖箭头键滚动事件
- Javascript如何找到滚动事件的来源
- Image赢得't隐藏在滚动jQuery上
- Safari(Mac OS)上的jQuery平滑滚动问题
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 如何使用post方法从方法上传文件
- 禁用(而不是隐藏)浏览器滚动条
- 禁用POST上的滚动