`
shirlly
  • 浏览: 1644313 次
  • 性别: Icon_minigender_2
  • 来自: 福州
社区版块
存档分类
最新评论

刷新后保持页面滚动条位置javascript

阅读更多
在一个很长的列表中进行操作,当用户触发PostBack事件的时候,需要保持滚动条所在位置。搜索了一下,发现有两种方法可以实现。第一种,在msdn中找到的,设置Page的SmartNavigation(智能导航)属性为True。原文的备注是这样说的:


--------------------------------------------------------------------------------
在大多数情况下不要在代码中设置该属性。在 .aspx 文件的 @ Page 指令中将 SmartNavigation 属性设置为 true。请求该页时,动态生成的类将设置该属性。
Internet Explorer 5.5 或更高版本浏览器请求页时(或稍后),智能导航将通过执行下列功能提高用户对该页的操作能力:

消除导航导致的闪烁。
从一页移动到另一页时保持滚动位置。
保持导航之间的元素焦点。
在浏览器的历史记录中只保留最后一页的状态。
智能导航最适用于需要频繁回发但是其可是内容在返回时不会发生显著更改的 ASP.NET 页。在决定是否将该属性设置为 true 时,请仔细考虑这一点。



--------------------------------------------------------------------------------


对aspx页面来说,真的是很简单,只需要在页面头的@ Page后面多加一个SmartNavigation="True"就ok了,经简单的测试,没有问题,显示效果良好。但实际应用中却发现了问题。报告有 js脚本错误,无论如何也保持不了滚动条的状态。经分析,发现是该页面调用了ascx(Custom Control)的缘故,且拉长页面的也正是拜ascx控件所赐。于是乎,考虑将SmartNavigation="True"添加到ascx页面中。结 果,失败!ascx不支持@Page指令!虽说ascx也是一个页面,但和aspx还是有区别的。看来这种方法是解决不了这个问题的,只得令寻他法。

经 再次搜索,发现有人用js脚本写过这个方法(感谢宝玉提供的js)。js是在客户端运行的,只要我的aspx页面能解析到客户端,不都是html文件么, 从理论上说,用js的方法是可以实现的。于是马上动手试验,结果,成功!虽然当页面内容很多的时候有一个稍微明显的闪动,但滚动条可以保持在 PostBack前的位置,与需求相符,问题解决。


ps:另附js脚本

<script language="javascript">
<!--
//  获取当前文件名
function getFileName()
{
    var url = this.location.href;
    var pos = url.lastIndexOf("/");
    if(pos == -1)
        pos = url.lastIndexOf("\\");
    var filename = url.substr(pos+1);
    return filename;
}

function fnLoad()
{
    with(window.document.body)
    {
        addBehavior ("#default#userData");    // 使得body元素可以支持userdate
        load("scrollState" + getFileName());    // 获取以前保存在userdate中的状态
        if (sFirstEnter=="0")
        {
            scrollLeft = getAttribute("scrollLeft");    // 滚动条左位置
            scrollTop = getAttribute("scrollTop");
        }
    }
}
function fnUnload()
{
    with(window.document.body)
    {
        setAttribute("scrollLeft",scrollLeft);
        setAttribute("scrollTop",scrollTop);
        save("scrollState" + getFileName());    
        // 防止受其他文件的userdate数据影响,所以将文件名加上了
        // userdate里的数据是不能跨目录访问的
    }
}

window.onload = fnLoad;
window.onunload = fnUnload;
// -->
</script> 

 

通过对js函数的研究发现,只要具有scroll属性的html控件,都可以用这个方法来实现页面刷新后的滚动条的定位。当然,函数是要做一下改动。把 with(window.document.body)中的body改为其他控件的ID就可以了: with(window.document.all["控件ID"])

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/lilinjian2001/archive/2006/08/31/1150332.aspx
分享到:
评论

相关推荐

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

    而滚动条位置的问题则关系到用户体验的连贯性,确保用户在离开页面后再次返回时,能够直接回到之前查看的位置,这是现代Web应用优化的重要部分。 1. **H5页面返回**:在H5页面间进行导航时,用户可能会通过浏览器的...

    滚动条刷新定位

    虽然这种方法可以实现实时跟踪滚动条位置的功能,但并不符合“滚动条刷新定位”的需求。正确的做法应该是将滚动位置保存在本地存储中,而不是实时更新某个元素的位置。 #### 五、注意事项 1. **兼容性问题**:不同...

    Ext grid panel 滚动条位置不变

    当数据刷新完成后,在`refresh`事件中恢复滚动条位置。这里需要注意的是,如果滚动条原本位于顶部(`view.scrollTop == 0`),则不需要做任何调整;否则,需要根据新的滚动高度与之前的滚动高度之间的差值来调整滚动...

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

    在某些场景下,比如在页面之间切换时,我们希望用户在返回之前浏览的位置时,列表能够保持原来的滚动条位置,即实现滚动条位置的保留。这通常需要配合Vue的`keep-alive`组件来实现页面的缓存。 首先,`keep-alive`...

    完美解决ASP.NET回传后div滚动条位置复位的问题

    - **性能考虑**:如果页面中有多个需要保持滚动条位置的`div`元素,那么可以考虑将这个逻辑封装成一个通用的方法或者类,以减少重复代码。 - **安全性和验证**:在处理从客户端传递过来的数据时,一定要做好验证和...

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

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

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

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

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

    为了解决这个问题,我们可以自定义一些JavaScript代码来实现滚动条位置的保持不变。 首先,我们需要理解问题的根源。layui table 默认情况下并不会在翻页时保留滚动条的位置。这是因为表格在每一页加载新数据时,...

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

    页面刷新后,通过读取存储在Cookie中的scrollTop值,并将其赋值给div元素,从而实现滚动条位置的恢复。这种方法的优点在于简单易实现,且不依赖于特定的浏览器环境;但缺点也很明显,Cookie的存储空间有限,不适合...

    FineReport中如何用JavaScript解决控件值刷新不及时的问题

    然而,根据默认的逻辑,用户在输入新数据后,通常需要进行额外的操作,如点击页面的空白区域,才能使数据被正确读取和刷新。这种不即时的数据刷新机制可能会导致用户体验下降,并影响数据处理的效率。 为解决这一...

    Vue实现渲染数据后控制滚动条位置(推荐)

    总结起来,Vue实现渲染数据后控制滚动条位置的关键在于理解Vue的异步更新队列,并合理利用`setTimeout`来确保DOM更新后再进行DOM操作。通过这种方法,我们可以确保聊天界面始终保持最新消息可见,提供良好的用户体验...

    滚动条刷新以后居中

    // 使用 scrollTo 函数调整滚动条位置 window.scrollTo(offsetX, 0); // 可选:添加调试信息 console.log("Body Width: " + bodyWidth); console.log("Content Width: " + contentWidth); console.log(...

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

    在网页设计中,有时我们希望用户在刷新页面或者重新加载后,页面的滚动条能保持在之前的位置,提供更好的用户体验。这个功能可以通过JavaScript配合jQuery来实现,尤其在使用cookie存储滚动条位置的情况下。以下是...

    ajax 局部刷新例子 日期验证 滚动条

    - **JavaScript处理**:通过监听滚动事件,可以实现滚动条位置改变时触发特定功能,如无限滚动加载更多内容。 结合上述知识,我们可以理解这是一个基于Ajax技术的项目,它可能包含一个简单的网页应用,该应用展示...

    MVC实现文件上传带滚动条

    3. **AJAX提交**: 当用户点击上传按钮时,使用AJAX异步提交文件,防止页面刷新,保持滚动条位置。同时,可以通过返回的响应信息更新用户界面,显示上传进度或错误提示。 **三、服务器端处理** 1. **路由配置**: 在...

    vue 每次渲染完页面后div的滚动条保持在最底部的方法

    在Vue.js中,页面的动态内容更新会导致滚动条位置发生变化,特别是在列表或聊天窗口这类高度动态的场景中,用户希望能够保持滚动条在最新的内容区域,即通常所说的“滚动到底部”。为了实现这一功能,Vue提供了几个...

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

    当用户从一个详情页面返回到之前的列表页面时,用户体验通常要求保持之前页面的滚动位置,而不是返回到页面顶部。本文就如何在使用Vue.js开发的应用中实现返回上一页面时回到之前滚动位置的方法进行了详细介绍。 ...

    Vue中keep-alive 实现后退不刷新并保持滚动位置

    这意味着,当你在页面间来回切换,即使组件被缓存,滚动条的位置也不会保持。为了解决这个问题,我们需要利用Vue的生命周期钩子函数`activated`和`deactivated`。 `activated`钩子在组件被`&lt;keep-alive&gt;`激活时调用...

    asp.net通过Ajax UpdatePanel回传后滚动条位置变更解决方法

    然而,在使用UpdatePanel时,一个常见的问题是在回传数据后,页面的滚动条位置会重置到顶部,这可能会打断用户的浏览流程。为了解决这个问题,我们可以采用以下策略: 首先,我们需要在页面中添加一个隐藏的控件...

Global site tag (gtag.js) - Google Analytics