写了个WEB中记录滚动条位置的脚本

本文介绍了一种使用JavaScript和Cookie的技术来实现网页刷新后滚动位置的保持。通过设置和获取Cookie来记录滚动条的位置,从而在页面重新加载时能够回到之前的位置。

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

  Web中难免遇到一些难解决的问题,有些客户就有些变态的要求,刷新后页面继续保持在原来的位置就是一个不好解决的问题.

  利用js的cookie写了个脚本,基本上能实现刷新后位置保留

 脚本代码如下:

     将此脚本插入到网页中即可,网页尽量长,刷新后即可看到效果!

<script language="javascript">
    
<!--
    
function SetCookie(sName, sValue)
    
{
        date 
= new Date();
        s 
= date.getDate();
        date.setDate(s
+1);            //expire time is one month late!, and can't be current date!
        document.cookie = sName + "=" + escape(sValue) + "; expires=" + date.toGMTString();
    }

    
function GetCookie(sName)
    
{
        
// cookies are separated by semicolons
        var aCookie = document.cookie.split("");
        
for (var i=0; i < aCookie.length; i++)
        
{
        
// a name/value pair (a crumb) is separated by an equal sign
        var aCrumb = aCookie[i].split("=");
        
if (sName == aCrumb[0]) {
            
return unescape(aCrumb[1]);}

        }

        
        
// a cookie with the requested name does not exist
        return null;
    }


    
function fnLoad()
    
{
        document.body.scrollLeft 
= GetCookie("scrollLeft");
        document.body.scrollTop 
= GetCookie("scrollTop");
    }


    
function fnUnload()
    
{
        SetCookie(
"scrollLeft", document.body.scrollLeft)
        SetCookie(
"scrollTop", document.body.scrollTop)
    }


    window.onload 
= fnLoad;
    window.onunload 
= fnUnload;

    
// -->
</script>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值