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

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);
      }
}
分享到:
评论

相关推荐

    h5下拉刷新上拉加载滚动条位置

    这通常可以通过JavaScript来实现,监听页面的`beforeunload`或`unload`事件,存储滚动位置到本地存储(localStorage或sessionStorage)。 5. **实现技术**:在H5中,可以使用`window.pageYOffset`或`document....

    滚动条刷新定位

    2. **恢复滚动位置**:在页面加载完成后,根据之前记录的滚动位置信息,调整滚动条到相应的位置。 #### 三、实现方法 下面详细介绍一种常见的实现方式,即使用JavaScript来实现滚动条刷新定位。 ##### 3.1 记录...

    【JavaScript源代码】vant list组件滚动保留滚动条位置.docx

    接着,在路由配置文件`router.js`中,我们需要给每个需要缓存和保留滚动位置的路由添加`meta`对象,并设置`keepAlive`为`true`。同时,为了记录滚动条的位置,可以添加一个`scrollTop`属性,初始化为0。这样做是为了...

    js实现页面刷新滚动条位置不变

    为了在页面刷新后保持滚动条位置不变,通常需要在客户端保存滚动条的当前位置,在页面重新加载后,再将滚动条重新定位到该位置。本文介绍了使用JavaScript来实现这一功能的方法。 首先,我们需要理解当页面刷新时,...

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

    在现代网页设计中,实现页面刷新后滚动条能够回到之前的位置是一个用户体验优化的重要方面。本文主要探讨了在HTML页面中,如果存在一个具有滚动条的div元素,如何通过JavaScript记录并恢复滚动条位置。以下将详细...

    Ext grid panel 滚动条位置不变

    具体做法是监听`beforerefresh`和`refresh`事件,在这些事件中记录并恢复滚动条的位置。 ##### 监听beforerefresh事件 ```javascript listeners: { beforerefresh: function (view) { view.scrollTop = view....

    uni-app 社交 下拉加载历史消息记录,滚动到下拉之前,不闪

    "uni-app 社交 下拉加载历史消息记录,滚动到下拉之前,不闪"这个主题关注的是如何在移动应用中实现平滑的下拉加载功能,同时避免页面在加载新内容时出现闪烁现象,确保用户在查看聊天历史时能有流畅的交互体验。...

    vue返回上一页面时回到原先滚动的位置的方法

    在单页面应用Vue.js中,页面间跳转通常是通过更改路由来实现,而页面刷新则意味着状态丢失。当用户从一个详情页面返回到之前的列表页面时,用户体验通常要求保持之前页面的滚动位置,而不是返回到页面顶部。本文就...

    jquery node.js 滚动分页插件

    前端接收到数据后,使用jQuery动态地将新数据插入到页面的适当位置,实现无缝滚动加载。 7. **优化**: 为了提升性能,可以考虑使用分页缓存,或者在前端实现无限滚动效果,避免用户每次滚动都发送请求。还可以...

    vue页面跳转后返回原页面初始位置方法

    在需要记录滚动位置的页面(如`listview`页面),在`beforeRouteLeave`生命周期钩子中,获取当前页面的滚动位置,并将其存储到Vuex的`recruitScrollY`状态中: ```javascript beforeRouteLeave(to, from, next) {...

    页面刷新时记住滚动条的位置jquery代码

    在现代网页应用中,用户体验是至关重要的一个方面。...在这些框架中,我们通常会通过全局状态管理或路由管理等功能来更好地控制页面的滚动状态,这样即便页面刷新,也能够较为方便地恢复用户的滚动位置。

    js简单的上拉刷新下拉加载

    总的来说,实现JavaScript的上拉刷新和下拉加载功能,关键在于正确地监听滚动事件、判断滚动位置,以及有效地处理数据请求和更新页面内容。结合适当的库如jQuery,可以大大简化这一过程,提高开发效率。对于H5开发者...

    bug 下拉就触发刷新而不是下拉到顶部触发.zip

    这可能涉及到计算元素的相对位置和滚动位置。 4. **框架和库的使用**:如果项目中使用了像Vue.js这样的前端框架,可能会涉及到框架特定的生命周期钩子或组件属性,如Vue的`beforeUpdate`和`updated`钩子,以及可能...

    jQuery购买记录滚动更新代码.zip

    Ajax是异步JavaScript和XML的缩写,它允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。使用jQuery的`.ajax()`或`.getJSON()`方法可以轻松实现。 2. **数据处理**:收到服务器返回的数据后,...

    jQuery购买记录滚动显示代码.zip

    这样的滚动效果可以持续更新,不断展示新的购买记录,而不需要用户手动刷新页面。 此外,考虑到代码的结构和可维护性,开发者很可能采用了模块化或者函数封装的方式来组织代码。他们可能会定义一个函数如`function ...

    js如何控制防刷新功能

    在JavaScript中,实现页面防刷新功能主要是为了保持用户在页面上的状态不因页面重载而丢失,例如表单填写的数据、滚动位置等。这通常通过使用局部存储(如`localStorage`或`sessionStorage`)、AJAX异步更新、以及...

    js上拉刷新下拉加载

    实现上拉刷新的核心是监听滚动事件,并判断滚动位置是否到达页面底部。一旦达到预设阈值,就发送请求获取新数据,并在页面底部插入这些新内容。 2. **下拉加载**: 下拉加载,又称“无限滚动”或“滚动加载”,是...

    vue使用keep-alive保持滚动条位置的实现方法

    当跳转到下一个页面后,我们再在页面激活时(如在的activated生命周期钩子中)将保存的滚动条位置设置回页面元素上。 实现的关键代码如下: 1. 在定义路由时,给需要保持滚动条位置的路由增加一个meta对象,并设置...

    js无刷新分页

    5. **动态更新DOM**:前端接收到响应后,解析JSON数据,利用JavaScript操作DOM,将新数据插入到页面的相应位置,同时更新分页导航的状态。 6. **状态管理**:为了确保用户可以前进或后退到已访问过的分页,可以使用...

Global site tag (gtag.js) - Google Analytics