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

标签: js 记录 页面 | 发表时间:2014-06-17 22:11 | 作者:TranCoffee
出处:http://www.iteye.com
需求:
页面上的结果集列表有多条记录,选中某一行进行操作时,页面可能已经滚动过一段距离,当点击提交时希望能记录滚动过的长度,并在页面提交刷新后自动滚动到该位置。

实现思路:
使用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);
      }
}


已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [js 记录 页面] 推荐:

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

- - JavaScript - Web前端 - ITeye博客
页面上的结果集列表有多条记录,选中某一行进行操作时,页面可能已经滚动过一段距离,当点击提交时希望能记录滚动过的长度,并在页面提交刷新后自动滚动到该位置. 使用jquery来操作dom,方便易用. 1、获取当前滚动过的距离;. 以struts2+velocity为例. 前台在点击某条记录修改时获取当前滚动的距离x、y,将x、y传给后台,后台处理完成后继续跳转页面(在本需求中即为当前页面),将x、y作为参数传给目的页面.

用JS将页面定位到某个位置(DIV)

- - JavaScript - Web前端 - ITeye博客
昨天一个朋友问我如何在页面加载完成后,自动将页面定位到某个位置,当时有些忙,就没来得及解决. 殊不知今天在做PHP教程的项目中也有了同样的需求:为了页面美观,需要只显示用户从楼盘相册点击后进入的相册幻灯页面的楼盘信息(也就是自动定位到了楼盘的相关信息,忽略了顶部banner). 使用Javascript自动将页面滚动到指定位置.

js 和 jquery 获取页面和滚动条的高度

- - Web前端 - ITeye博客
js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight && window.scrollMaxY) {. return {PageW:pageW, PageH:pageH, WinW:winW, WinH:winH}; }; //滚动条位置 function GetPageScroll() { var x, y; if(window.pageYOffset) {.

页面构建和js前端不得不说的那点事儿

- - 微博UDC
作为微博的页面构建工程师,主要职责就是利用html&css,高质量的完成静态页面的制作,保证项目的按时完成. 而页面需要的js效果则交给下游的js前端工程师去做. 但在大家的思维定势里可能觉得这两个岗位应由一个人来完成最好,毕竟,页面构建工程师写的html结构不一定是js工程师想要的那种,js工程师可能有更高效的方式.

javascript 获取滚动条高度+常用js页面宽度与高度

- - Web前端 - ITeye博客
javascript 获取滚动条高度+常用js页面宽度与高度 / ******************** * 取窗口滚动条高度 ****************** / function getScrollTop() {. return scrollTop; } / ******************** * 取窗口可视范围的高度 ******************* / function getClientHeight() {.

抓取Js动态生成数据且以滚动页面方式分页的网页

- - 开源软件 - ITeye博客
当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢. 如类似今日头条这样的网站: http://toutiao.com/. 我们可以使用 Selenium来搞定这件事情. Selenium的设计目的虽然是用于Web应用程序的自动化测试,但是却非常适合用来做数据抓取,可以非常简单地绕过网站的反爬虫限制,因为Selenium直接运行在浏览器中,就像真正的用户在操作一样.

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中,. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

JS游戏引擎

- 米随随 - HTML5研究小组
If you don’t have anything better to do and want to help fellow redditors interested in JS game dev out, feel free to fork the list and modify it as you like.

來源請求.js

- 红烧鲤鱼 - Blog: timdream
很早以前就想講了,但講了大概又會被戰. 相較於英文維基百科,中文維基百科在社會和歷史條目充滿了 systemic bias. 但是那些主觀論述又不是編輯者有意加進去的,而是某種編輯者存在的社會所給予的暗示(Inception?)與集體共識,而不是原本百科全書應該有的可驗證的事實. 因為是暗示又是共識,所以有自覺的百科編輯者反而是少數;中文維基只好長成現在這個樣子了.

Js删除节点

- - JavaScript - Web前端 - ITeye博客
 方式一:传this参数调用方法:.  方式二:js方法中通过选择器获取节点:. //此处删除的是a节点 }. 方式三:通过jQuery方式获取节点:(尚未测试,有待测试. 此处a标签传this到js中,js通过this(即a节点)取parent(即p节点). (1)p.remove();可直接删除整个p节点.