键盘Keyboard 2024-03-20 23:52 采纳率: 0%
浏览 46

react-router-dom如何实现返回上一级页面能滚动到上次滚动到的位置？

我有两个页面，第一是列表，有很多新闻，第二个页面是新闻详情页，我想的是当用户滚动到一定的位置点进去看新闻，看完后返回能定位到原来的位置，但是目前我的是直接滚回到了顶部，有什么解决方案吗

  • 写回答

3条回答 默认 最新

  • 码农阿豪@新空间 新星创作者: 前端开发技术领域 2024-03-20 23:53
    关注
    让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言
    问题：如何实现从新闻列表页进入详情页后，返回时能定位到上次滚动位置？ 解决方案：可以利用浏览器的 history 对象以及页面滚动的事件来实现。具体步骤如下：
    1. 记录滚动位置：在列表页中监听页面滚动事件，当滚动位置发生变化时，将当前滚动位置记录到 sessionStorage 中，例如：
    // 监听页面滚动事件
window.addEventListener('scroll', function () {
  // 当前滚动位置
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  // 将当前滚动位置记录到 sessionStorage 中
  sessionStorage.setItem('scrollTop', scrollTop);
});
    1. 进入详情页：在列表页中点击新闻链接进入详情页，这时候可以使用 history.pushState 方法将当前滚动位置记录到浏览器 history 对象中，例如：
    // 获取当前滚动位置
var scrollTop = sessionStorage.getItem('scrollTop');
// 将当前滚动位置记录到浏览器 history 对象中
history.pushState({scrollTop: scrollTop}, '', '');
    1. 返回列表页：在详情页中点击返回按钮或者浏览器返回按钮返回列表页时，监听 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>
    评论

报告相同问题？

问题事件

  • 创建了问题 3月20日