用localstorage本地存储，保存滚动条的高度下次打开页面直接跳转到滚动条处

最新推荐文章于 2022-09-29 13:49:49 发布

肖肖肖丽珠

最新推荐文章于 2022-09-29 13:49:49 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/qq_33769914/article/details/64442764

版权

分析：首先把滚动条的高度记录下来，下次打开以后就直接设置滚动条高度是存起来的那个值。

首先基础知识是localstorage的使用。

存信息localStorage.setItem("a",fffff)；

取信息localStorage.getItem("a")； ------fffff

滚动条有高度时，获取滚动条的高度，并把它存起来(考虑到浏览器的兼容性问题)

window.addEventListener("scroll",function(){ //监听滚动条

var top=document.body.scrollTop || document.documentElement.scrollTop;

localStorage.setItem("Ltop", top);

})

每次在页面加载时获取到他的localStorage里面存的滚动条的高度，

var height=localStorage.getItem("Ltop");

if(height){ //如果有高度就说明以前存储到。获取到给滚动条

if (document.documentElement.scrollTop!=undefined) { //注意这里，如果为0，他也是要走这里的，所以有些网站写的后面没有写我标注的信息，所以就出错了。注意注意这里。

document.documentElement.scrollTop=height;

}

else{

document.scrollTop=height;

}

完整的内容在这里啦

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>

   <body>
   <div class="wrap">
26 <h2>HTML5学堂官网</h2>
27 <p>HTML5学堂，致力于构建一个前端、HTML5的“原创”分享平台。能够为学习者提供一些资料，也为广大前端爱好者提供一个平台。HTML5学堂最初由两名讲师（利利和堡堡）创建，当前有多名HTML5讲师以及HTML5开发工程师组成。H5学堂中，主要涉及HTML与CSS、Java、jQuery、AJAX等前端的基本的知识、HTML5的实例开发、Java底层知识、类库、面试真题、相关技术、行业未来发展等。这里，将知识最通俗易懂的描述出来。我们希望HTML5学堂能够成为一个个性化的学习网站，为您提供最适合您的信息。</p>
28 <h2>HTML5学堂微信</h2>
29 <p>收罗HTML5与HTML5的相关技术。在这里有原创的HTML5、CSS3、Java等前端知识，也有来自互联网的HTML5全新动态~HTML5学堂由几位讲师倾情打造，或许这里没有最牛的技术，但却将HTML5最浅显易懂的表达了出来。</p>
30 <h2>摩登足迹微信号</h2>
31 <p>当前你的智能手机,隐藏着哪些功能你不了解的功能,又有哪些优秀的生活软件?“狗带”“宝宝心里苦”到底什么意思?所有内容尽收于此.这里有智能手机的小用法,有各类优秀软件,也有那些你不了解的流行词汇.</p>
32 <h2>HTML5学堂官网</h2>
33 <p>HTML5学堂，致力于构建一个前端、HTML5的“原创”分享平台。能够为学习者提供一些资料，也为广大前端爱好者提供一个平台。HTML5学堂最初由两名讲师（利利和堡堡）创建，当前有多名HTML5讲师以及HTML5开发工程师组成。H5学堂中，主要涉及HTML与CSS、Java、jQuery、AJAX等前端的基本的知识、HTML5的实例开发、Java底层知识、类库、面试真题、相关技术、行业未来发展等。这里，将知识最通俗易懂的描述出来。我们希望HTML5学堂能够成为一个个性化的学习网站，为您提供最适合您的信息。</p>
   <script>

var height=localStorage.getItem("Ltop");

if(height){     //如果有高度就说明以前存储到。获取到给滚动条
    if (document.documentElement.scrollTop!=undefined) {
      document.documentElement.scrollTop=height;
    }
    else{
       document.scrollTop=height;
     }

}
window.addEventListener("scroll",function(){ //监听滚动条
     var top=document.body.scrollTop || document.documentElement.scrollTop;
     localStorage.setItem("Ltop", top);
})


   </script>


   </body>
</html>

肖肖肖丽珠

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用localstorage本地存储，保存滚动条的高度下次打开页面直接跳转到滚动条处

分析：首先把滚动条的高度记录下来，下次打开以后就直接设置滚动条高度是存起来的那个值。首先基础知识是localstorage的使用。存信息localStorage.setItem("a",fffff)；取信息localStorage.getItem("a")； ------fffff滚动条有高度时，获取滚动条的高度，并把它存起来(考虑到浏览器的兼容性问题)wind
复制链接

扫一扫