`
TranCoffee
  • 浏览: 9516 次
社区版块
存档分类
最新评论

js记录页面的点击位置并在页面刷新后滚动到该位置

阅读更多
需求:
页面上的结果集列表有多条记录,选中某一行进行操作时,页面可能已经滚动过一段距离,当点击提交时希望能记录滚动过的长度,并在页面提交刷新后自动滚动到该位置。

实现思路:
使用jquery来操作dom,方便易用。
1、获取当前滚动过的距离;
2、在前后台之间传递;
3、在页面刷新后滚动到该位置。


代码:
1、获取当前滚动的距离:
var x = $(document).scrollLeft();
var y = $(document).scrollTop();

2、在前后台传递参数:
以struts2+velocity为例。
需要实现这样一个流程:
前台在点击某条记录修改时获取当前滚动的距离x、y,将x、y传给后台,后台处理完成后继续跳转页面(在本需求中即为当前页面),将x、y作为参数传给目的页面。
form表单的action为/test/book/modify.action,对应的action类为BookAction.java。该类增加两个属性并设置相应的get、set方法:
int scrollLeft=-1;
int scrollTop=-1;
public void setXxx(int value){
    xxx = value;
}
public int getXxx(){
    return xxx;
}

首先配置该action的相关配置:
<package name="book" namespace="/test/book" extends="default">
        <action name="*" class="com.test.book.BookAction" method="{1}">
            <result>/WEB-INF/vm/test/book/{1}.vm</result>
	    <result name="list4modify" type="chain">
                <param name="actionName">list</param>
            </result>

以上配置可知,当提交的action为/test/book/modify.action时,会进入BookAction.modify()方法,该方法返回值为"list4modify"。
public class BookAction{
...
    public String modify(){
        ...
        return "list4modify";
    }
}

然后触发list.action,在页面list.vm中需要处理滚动的动作。
3、在页面刷新后滚动到该位置:
在list.vm中编写如下逻辑即可:
 $(document).ready(function() {
      var x = parseInt($!scrollX);
      var y = parseInt($!scrollY);
      if((x || y) && (x > 0 || y > 0)){
	    window.scroll(x,y);
      }
}
分享到:
评论

相关推荐

    js实现刷新页面后回到记录时滚动条的位置【两种方案可选】

    本文主要介绍了页面的div中有滚动条,js实现刷新页面后回到记录时滚动条的位置的两种方案,需要的朋友可以看下

    layui 实现table翻页滚动条位置保持不变的例子

    今天小编就为大家分享一篇layui 实现table翻页滚动条位置保持不变的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    vue2.0页面前进刷新回退不刷新的实现方法

    //在APP.vue里面写,当页面路由发生变化时,将相应页面的滚动位置记录下来,在页面updated时读取并赋值 第四步: //因为我的想法是从首页(index.vue)进入列表页时刷新数据,从列表页点击进入详情页,再返回列表

    程序天下:JavaScript实例自学手册

    2.1 页面刷新按钮 2.2 按回车调用登录按钮 2.3 动态创建按钮 2.3 平面按钮 2.4 按钮的嵌入效果 2.5 按钮改变状态栏信息 2.6 定义按钮的热键 2.7 取得控件的绝对位置 2.8 删除时的确认提 示 2.9 按钮只能单击一次 ...

    《程序天下:JavaScript实例自学手册》光盘源码

    2.1 页面刷新按钮 2.2 按回车调用登录按钮 2.3 动态创建按钮 2.3 平面按钮 2.4 按钮的嵌入效果 2.5 按钮改变状态栏信息 2.6 定义按钮的热键 2.7 取得控件的绝对位置 2.8 删除时的确认提示 2.9 按钮只能单击一次 2.10...

    JavaScript网页特效范例宝典源码

    实例301 将Web页面中的数据导出到Excel并自动打印 476 11.4 利用CSS样式打印 478 实例302 利用CSS样式打印页面中的指定内容 478 实例303 利用CSS样式分页打印 479 11.5 套打邮寄产品单 482 实例304 打印汇款单 482 ...

    thinkphp框架基于ajax,js的滚屏加载技术demo

    初学php,基于ajax,js用thinkphp做的拉下滚动条到底部时,无刷新加载数据库内容,很简单的数据库,就一条记录,简单的加载,并在引动段也测试过可用.此应用代码有一个小前提,就是默认页面原有的内容量够多,是页面存在滚动...

    iscroll.js的上拉下拉刷新时无法回弹的解决方法

    使用过iscroll.js的上拉下拉刷新效果的朋友应该都碰到过这个问题:在iOS的浏览器中,上拉或下拉刷新时,当手指划出屏幕后,页面无法弹回。很多人因为解决不了这个问题,干脆就那样不解决了,还有的直接就不用HTML了...

    JavaScript完全自学宝典 源代码

    Calculate1.java 计算浮点数运算结果并调用页面中JavaScript函数的Applet。 Calculate1.class Calculate1.java的字节码文件。 第16章(\c16) 示例描述:介绍JavaScript访问本地文件的各种方法。 16.1....

    javascript网页特效实例大全(8-12)

    实例301 将Web页面中的数据导出到Excel并自动打印 476 11.4 利用CSS样式打印 478 实例302 利用CSS样式打印页面中的指定内容 478 实例303 利用CSS样式分页打印 479 11.5 套打邮寄产品单 482 实例304 打印...

    ExtAspNet_v2.3.2_dll

    -ExtAspNet支持原生的AJAX,也就是说控件的属性改变在AJAX过程中会反映到页面中,但并不是所有的控件属性都支持AJAX改变。 -加载s.gif图片在本机进行,不会请求extjs.com远程资源(feedback:efrigate43,abaocoole)...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -ExtAspNet支持原生的AJAX,也就是说控件的属性改变在AJAX过程中会反映到页面中,但并不是所有的控件属性都支持AJAX改变。 -加载s.gif图片在本机进行,不会请求extjs.com远程资源(feedback:efrigate43,abaocoole)...

    百度收藏夹(ASP仿腾讯微博) v2.9.rar

    13、发表图片时增加原图按钮,点击后在新窗口打开查看原图。预防一些尺寸大的图看不清楚。 14、修改广播里点击“对话”时,进入即时聊天对话模式。 15、增加查看"即时聊天"记录的按钮. 16、增加记录查看即时聊天...

    大名鼎鼎SWFUpload- Flash+JS 上传

    在FireFox中,如果窗口的滚动条没有回滚到顶部,那么Flash无法加载 Race-conditions when files are cached 兼容ASP.Net Forms SWFUpload v2 延续了SWFUpload的设计目标,将UI分离以交给开发人员控制和后续扩展 ...

    禅道项目管理软件6.3版

    638 用例详情中点击执行后会跳转到空的用例执行页面 639 需求bug的搜索功能保存查询条件后点击页面空白 644 导入bug时指派给时间没有设置 631 火狐下任务的弹出页面上面的边框少了 645 用例csv导入执行次数问题 651 ...

    jsp编程技巧集锦

    数字转中文 128 自动计算金额 129 JSP页面打印中使用WebBrowser控件 130 不刷新页面添加新的类别 131 鼠标滚动缩放图片 132 根据输入的表名生成输入数据表格 133 JSP表格输出到Excel 134.JSP...

    超实用的jQuery代码段

    1.13 平滑滚动页面到某个锚点 1.14 阻止文本行换行 1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 ...

    禅道项目管理软件发布 v4.3 beta版本.zip

    1068 在添加对象的时候,如果某个字段没有取值列表,给出相应的链接,并可局部刷新 1067 创建新的计划的时候选择最新的一个计划结束日期开始。 1066 创建应用的时候,判断是否有http:// 1065 批量添加用户的...

Global site tag (gtag.js) - Google Analytics