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);
}
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章