有时候，在网页中点击了页面中的按钮或是刷新了页面后，页面滚动条又 会回到顶部，想看后面的记录就又要拖动滚动条，或者要按翻页键，非常不方便，想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变，最好的办法就是 在JS中用cookie记录下当前滚动条的位置，然后刷新时读取cookie就可以实现这个功能了。
代码如下：
<script type="text/javascript">
function Trim(strValue)
{
//return strValue.replace(/^s*|s*$/g,"");
return strValue; 
}

function SetCookie(sName,sValue)
{
document.cookie = sName + "=" + escape(sValue);
}

function GetCookie(sName)
{
var aCookie = document.cookie.split(";");
for(var　i=0;　i　< aCookie.length;　i++)
{
var aCrumb = aCookie[i].split("=");
if(sName　== Trim(aCrumb[0]))
{
return unescape(aCrumb[1]);
}
}

　　return null;
}

function scrollback()
{
if(GetCookie("scroll")!=null){document.body.scrollTop=GetCookie("scroll")}
}
</script>
然后在html页面中设置<body id=body onscroll=SetCookie("scroll",document.body.scrollTop); onload="scrollback();">就可以在刷新或提交后滚动条的位置保持不变了。

如果不好用，这里修改下：document.body.scrollTop修改为document.documentElement.scrollTop

当你用asp.net开发web页面时，你会发现，如果你设置了一个页面，如果里面含有多个Button，而且页面很长。
当你点击Button后PostBack时，页面总是显示在最上面，极其不方便。

但下面这段代码，写帮你解决这个问题。

<input type="submit" name="Button1" value="Button" id="Button1" />
<input type="hidden" id="Window_OffsetY" name="Window_OffsetY" value="0">
<input type="hidden" id="Window_OffsetX" name="Window_OffsetX" value="0">

<script language="Javascript">
var ua = navigator.userAgent.toLowerCase();
var isIE = (ua.indexOf('msie') != -1 && !this.isOpera && (ua.indexOf('webtv') == -1) );

function Window_OnSubmitIE(){
    document.getElementById("Window_OffsetY").value = window.event.offsetY - window.event.clientY + 2;
    document.getElementById("Window_OffsetX").value = window.event.offsetX - window.event.clientX + 2 ;
}

function Window_OnSubmitNS(event){
    document.getElementById("Window_OffsetY").value = event.pageY - event.clientY;
    document.getElementById("Window_OffsetX").value = event.pageX - event.clientX;
}

if (!isIE){
    document.forms[0].addEventListener('submit',Window_OnSubmitNS, false);
}
else{
    document.forms[0].attachEvent('onsubmit',Window_OnSubmitIE);
}

function Lili1_OnLoad(){
    window.scrollTo(0,1431);
}

if (!isIE){
    window.addEventListener('load',Lili1_OnLoad, false);
}
else{
    window.attachEvent('onload',Lili1_OnLoad);
}
</script>

 
 
 
 

最近写了一个拖动层的HTML页面,   需要获取滚动条当前的位置.

于是我使用document.body.scrolltop获取y方向滚动的位置...奇怪的事情出现了! 无论滚动条怎么滚动,document.body.scrolltop竟然一直都是0!

对比以前写的一个页面.发现区别很小. 旧页面却没有问题.这就怪了...

我开始一点一点的排除,去掉多于的代码. 直到我去掉文档最顶部的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

页面此时才正常.

原来是这行东西造成IE无法获取document.body.scrolltop!

把顶部这两行删掉将可以了.但是为什么会这样呢?

google一下,发现改成:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

就可以了,但页面稍有变化，感觉不爽，于是又在google里找，终于解决：

var scrollPos; 
if (typeof window.pageYOffset != 'undefined') 
{ 
   scrollPos = window.pageYOffset; 
} 
else if (typeof document.compatMode != 'undefined' &&    document.compatMode != 'BackCompat') 
{ 
   scrollPos = document.documentElement.scrollTop; 
} 
else if (typeof document.body != 'undefined') 
{ 
   scrollPos = document.body.scrollTop; 
} 
alert(scrollPos);

document.body.scrollTop 
要改成 
document.documentElement.scrollTop

关于js中 document.body.scrollTop 不能返回正确值的原因

本来是为了通过document.body.scrollTop来获取浏览器垂直滚动条向下滚动的像素，但是不管滚动条在什么位置总是返回是0，造成这样的原因和html的头部声明有关，如果头部声明 为：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">，这样肯定得到的结果是 0，如果该为<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">就能得到正确的结果，对于第一种头部声明想要得滚动条的滚动的高度怎么办，解决方法有两种

1、var scrollPos;

if (typeof window.pageYOffset != 'undefined') {
scrollPos = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
scrollPos = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
scrollPos = document.body.scrollTop;
}

2、用document.documentElement.scrollTop 替代 document.body.scrollTop

JS控制form表单提交的位置

<script language = "JavaScript">
function CheckForm()
{

if (document.myform.keytext.value == "") {
  alert("查询关键字没有填写!\n\n请检查!");
  document.myform.keytext.focus();
  return false;
 }
    
 if (document.myform.cl.value == 1) 
  {
   document.myform.action="yqjsj.asp?keytext="+myform.keytext.value;
   document.myform.submit(); 
  }
 else if (document.myform.cl.value == 2)
  {
   document.myform.action="sjzz.asp?keytext="+myform.keytext.value;
   document.myform.submit(); 
  }
 else if (document.myform.cl.value == 3)
  {
   document.myform.action="gjhc.asp?keytext="+myform.keytext.value;
   document.myform.submit(); 
  }
 else if (document.myform.cl.value == 4)
  {
   document.myform.action="jyjqr.asp?keytext="+myform.keytext.value;
   document.myform.submit(); 
  }
}
</script>

var oFix = document.getElementById("divfix");

oFix.style.top = document.documentElement.scrollTop + "px";

【转载】[JS]让表单提交返回后保持在原来提交的位置上的更多相关文章

  1. Vue.js：表单

    ylbtech-Vue.js:表单 1.返回顶部 1. Vue.js 表单 这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. v-mo ...

  2. jQuery form插件的使用--用 formData 参数校验表单，验证后提交（简单验证）.

    Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src=& ...

  3. jquery.validate.js 验证表单时，在IE当中未验证就直接提交的原因

    jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...

  4. JS 更改表单的提交时间和Input file的样式

    JS转换时间 function renderTime(data) { var da = eval('new ' + data.replace('/', '', 'g').replace('/', '' ...

  5. jquery.form.js 让表单提交更优雅

    jquery.form.js 让表单提交更优雅.可以页面不刷新提交表单,比jQuery的ajax提交要功能强大. 1.引入 <script src="/src/jquery-1.9.1 ...

  6. ajax 提交所有表单内容及上传图片（文件），以及单独上传某个图片（文件）

    我以演示上传图片为例子: java代码如下(前端童鞋可以直接跳过看下面的html及js): package com.vatuu.web.action; import java.io.File; imp ...

  7. Form表单利用Jquery Validate验证以及ajax提交

    #表单利用Jquery验证验证以及ajax提交 概述>详细讲解表单利用Jquery >验证验证以及ajax提交的过程,以及Validate的自定义提示语,非空判断,输入字段的远程ajax验 ...

  8. js动态控制表单表格

    js动态控制表单表格,这里操作只讲,添加一行,删除一行,删除某一行某一列. 直接放代码: <!DOCTYPE html> <html> <head> <met ...

  9. Ladda 应用提交表单的时候显示loading载入中 包含不同位置，不同效果

    Ladda 应用提交表单的时候显示loading载入中 包含不同位置,不同效果 不同大小.位置,效果,进度条等 演示 XML/HTML Code <article class="exa ...

随机推荐

  1. django with mysql (part-1)

    step01: django-admin.py startproject dj01 step02: cd dj01 tree step03: python manage.py runserver Th ...

  2. atitit.条形码的原理与生成总结java Barcode4j barcode o5

    atitit.条形码的原理与生成总结java Barcode4j barcode o5 条形码类库使用报告Barcode4j, ZXing 1 使用成果图片 1 条形码标准code 128和code  ...

  3. FIR.im Weekly － 上周微博热转资源精选

    LeakCanary: 让内存泄露无所遁形 Square 开源的 LeakCanary,国内开发者 @廖祜秋liaohuqiu 翻译了对应的官方博客,撰写了中文使用说明文档,同时还写了一个小 Demo ...

  4. 一些java面试题

    1.SQL中的having子句用来干啥的? 答:having子句的功能是进行分组(GROUP BY)后的过滤 如:select id,avg(score) from  表 group by 学号 ha ...

  5. HTML5手机APP开发入门(1)

    HTML5手机APP开发入门(1) 开发框架 Ionicframework V2 + Angular 2 具体内容可以参考一下网站 http://ionicframework.net/ http:// ...

  6. 【Vegas原创】RHEL6多界面切换方法

    CTRL+ALT+Fn(n=1-6) F1,是图形化界面 F2-F6,是字符型界面. 每个界面可以干不同的事情,很牛叉.  

  7. Dell U2913WM使用感受

    21:9比例,本来想代替双屏的,一周用下来还是不适应,如何能弯成曲面就爽了.感觉最舒服的还是以前19寸5:4双屏,点距大. 还尝试在旁边立个23寸,看了15分钟就受不了,头晕. 漏光,还行. 加了个A ...

  8. Jquery+artTemplate+layPage 封装datagrid

    导言 在日常开发中经常会用到列表,相信用过easyui,Ext等很多,的确很强大,但想修改确实也不容易,我也用了几年的easyui,有时间时会想一下,自已随然没有前端的精湛技术,但可以在有这些技术的开 ...

  9. http协议读书笔记1-概述

    1.http协议在网络中的位置: http协议位于TCP协议的上层,http试用tcp来传输其报文数据,tcp在ip的上层. 2.浏览器发起连接的过程 上述图的过程是: 浏览器从url中解析出服务区的 ...

  10. Linux 输出文件列数，拼接文件

    如果我只想看看文件的前几行,每行的字段数(列数),我的文件已tab作为分隔符(这个可以自己指定),其具体命令如下: head fileName | awk -F'\t' '{print NF}' 如果 ...