JS刷新页面后滚动条的位置不变

本文介绍了一种方法,可以在网页刷新或提交后使滚动条的位置保持不变。通过使用JavaScript和cookie来记录并恢复滚动位置,提升用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

有时候,在网页中点击了页面中的按钮或是刷新了页面后,页面滚动条又 会回到顶部,想看后面的记录就又要拖动滚动条,或者要按翻页键,非常不方便,想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变,最好的办法就是 在JS中用cookie记录下当前滚动条的位置,然后刷新时读取cookie就可以实现这个功能了。
代码如下:
function showInfo(type,code){
        window.location.href = "__URL__/show"+type+"/id/"+code;
    }
    function  Trim(strValue)
    {
        return   strValue.replace(/^s*|s*$/g,"");
    }
    function SetCookie(sName,sValue)
    {
        document.cookie = sName + "=" + escape(sValue);
    }
    function GetCookie(sName)
    {
        var aCookie = document.cookie.split(";");
        for(var i=0; i < aCookie.length; i++)
        {
            var aCrumb = aCookie[i].split("=");
            if(sName == Trim(aCrumb[0]))
            {
                return unescape(aCrumb[1]);
            }
        }
        return null;
    }
    function scrollback()
    {
        if(GetCookie("scroll")!=null){document.body.scrollTop=GetCookie("scroll")}
    }



然后在html页面中设置
<body id=body onscroll=SetCookie("scroll",body.scrollTop); onload="scrollback();">

就可以在刷新或提交后滚动条的位置保持不变了。

上面的是通用的解决方法,在.net中还可以用<pages maintainScrollPositionOnPostBack="true">这个配置,更容易。 [喝小酒的网摘]http://blog.hehehehehe.cn/a/2391.htm
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值