我有两个页面,第一是列表,有很多新闻,第二个页面是新闻详情页,我想的是当用户滚动到一定的位置点进去看新闻,看完后返回能定位到原来的位置,但是目前我的是直接滚回到了顶部,有什么解决方案吗
3条回答 默认 最新
关注
让阿豪来帮你解答,本回答参考chatgpt3.5编写提供,如果还有疑问可以评论或留言
问题:如何实现从新闻列表页进入详情页后,返回时能定位到上次滚动位置? 解决方案:可以利用浏览器的 history 对象以及页面滚动的事件来实现。具体步骤如下:- 记录滚动位置:在列表页中监听页面滚动事件,当滚动位置发生变化时,将当前滚动位置记录到 sessionStorage 中,例如:
// 监听页面滚动事件 window.addEventListener('scroll', function () { // 当前滚动位置 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 将当前滚动位置记录到 sessionStorage 中 sessionStorage.setItem('scrollTop', scrollTop); });
- 进入详情页:在列表页中点击新闻链接进入详情页,这时候可以使用 history.pushState 方法将当前滚动位置记录到浏览器 history 对象中,例如:
// 获取当前滚动位置 var scrollTop = sessionStorage.getItem('scrollTop'); // 将当前滚动位置记录到浏览器 history 对象中 history.pushState({scrollTop: scrollTop}, '', '');
- 返回列表页:在详情页中点击返回按钮或者浏览器返回按钮返回列表页时,监听 popstate 事件,获取之前记录的滚动位置,然后将页面滚动到该位置即可,例如:
// 监听 popstate 事件 window.addEventListener('popstate', function (event) { // 如果 history 对象中有记录的滚动位置,则将页面滚动到该位置 if (event.state && event.state.scrollTop) { document.documentElement.scrollTop = document.body.scrollTop = event.state.scrollTop; } });
案例实现:以下是一个简单的示例代码: 列表页:
<!DOCTYPE html> <html> <head> <title>新闻列表页</title> <meta charset="utf-8"> <style> .news-item { margin: 20px 0; padding: 20px; border: 1px solid #ddd; } </style> </head> <body> <h1>新闻列表</h1> <ul> <li class="news-item"> <h2><a href="news.html?id=1">新闻标题1</a></h2> <p>新闻内容1</p> </li> <li class="news-item"> <h2><a href="news.html?id=2">新闻标题2</a></h2> <p>新闻内容2</p> </li> <li class="news-item"> <h2><a href="news.html?id=3">新闻标题3</a></h2> <p>新闻内容3</p> </li> <li class="news-item"> <h2><a href="news.html?id=4">新闻标题4</a></h2> <p>新闻内容4</p> </li> <li class="news-item"> <h2><a href="news.html?id=5">新闻标题5</a></h2> <p>新闻内容5</p> </li> </ul> <script> // 监听滚动事件 window.addEventListener('scroll', function () { // 记录当前滚动位置到 sessionStorage sessionStorage.setItem('scrollTop', document.documentElement.scrollTop || document.body.scrollTop); }); // 点击链接进入新闻详情页 var links = document.getElementsByTagName('a'); for (var i = 0; i < links.length; i++) { links[i].addEventListener('click', function (event) { // 阻止默认链接跳转 event.preventDefault(); // 获取新闻 ID var id = this.getAttribute('href').match(/id=(\d+)/)[1]; // 记录当前滚动位置到浏览器 history 对象 history.pushState({scrollTop: sessionStorage.getItem('scrollTop') || 0}, '', 'news.html?id=' + id); // 跳转到新闻详情页 location.href = 'news.html?id=' + id; }); } </script> </body> </html>
详情页:
<!DOCTYPE html> <html> <head> <title>新闻详情页</title> <meta charset="utf-8"> <style> .content { margin: 20px 0; padding: 20px; border: 1px solid #ddd; } </style> </head> <body> <h1>新闻详情</h1> <div class="content"> <p>新闻内容1</p> <p>新闻内容2</p> <p>新闻内容3</p> <p>新闻内容4</p> <p>新闻内容5</p> <p>新闻内容6</p> <p>新闻内容7</p> <p>新闻内容8</p> <p>新闻内容9</p> <p>新闻内容10</p> </div> <button onclick="history.back()">返回</button> <script> // 监听 popstate 事件 window.addEventListener('popstate', function (event) { // 如果有记录的滚动位置,则滚动到该位置 if (event.state && event.state.scrollTop) { document.documentElement.scrollTop = document.body.scrollTop = event.state.scrollTop; } }); </script> </body> </html>
解决 无用评论 打赏 举报
悬赏问题
- ¥15 flink-sql-connector-rabbitmq使用
- ¥15 zynq7015,PCIE读写延时偏大
- ¥15 使用spss做psm(倾向性评分匹配)遇到问题
- ¥20 vue+UEditor附件上传问题
- ¥15 想做个WPS的自动化代码,不知道能做的起不。
- ¥15 uniApp,生成安卓安卓包后,黑暗主题中间内容不生效,底部导航正常
- ¥15 斯坦福自动漂移非线性模型反解
- ¥15 学习Python如何找兼职
- ¥15 python结合Matlab仿真忆阻器
- ¥35 有人会注册whatsaop协议号吗?