在閱讀類、資訊類、博客類網(wǎng)站中，記憶用戶上次閱讀到的位置，并在下次訪問時自動滾動回那個位置，可以大大提升用戶體驗感。

今天我們就來詳細講一講：前端如何實現(xiàn)用戶回到上次閱讀的位置，包括基礎(chǔ)scroll方法+優(yōu)化、 Intersection Observer API + 探針追蹤、錨點 URL HASH 定位跳轉(zhuǎn)等策略實現(xiàn)一個流暢且高效的方案。

一、總體思路

1、核心目標(biāo)

在用戶滾動時記錄當(dāng)前位置。

在頁面重新加載時恢復(fù)到記錄的位置。

2、涉及到的技術(shù)

可以根據(jù)下列技術(shù)進行知識補充，或者直接選擇自己已經(jīng)熟悉的技術(shù)來實現(xiàn)：

• scroll 事件監(jiān)聽

• localStorage 本地存儲

• requestAnimationFrame 節(jié)流優(yōu)化

• Intersection Observer API 觀察元素進入視口

• Vue3 響應(yīng)式組件（如果需要框架版本）

二、實現(xiàn)方案詳解

1、基礎(chǔ)方法：監(jiān)聽滾動，記錄 scrollTop（不推薦）

在用戶滾動時，實時記錄 window.scrollY（頁面滾動的垂直距離），保存到 localStorage 中。頁面加載時，從 localStorage 讀取，并 scrollTo 恢復(fù)。

這可能是很多人的第一直覺，但是這種方法存在一個問題，就是scroll事件觸發(fā)太頻繁了。高頻滾動下每秒觸發(fā)一百多次都是非常正常的情況，常規(guī)的節(jié)流方法也不合適，比如添加一個節(jié)流時間。因為滾動可以是一個非?？焖俚倪^程，一秒鐘可能可以操作滾動條從頂?shù)轿?。所以這里選擇使用 requestAnimationFrame 方法來節(jié)流。

// 用于保存最新滾動位置
let lastKnownScrollY = 0;
// 用于控制 requestAnimationFrame
let ticking = false;

// 監(jiān)聽滾動事件
window.addEventListener('scroll', () => {
  lastKnownScrollY = window.scrollY;

  // 防止過度頻繁存儲，使用requestAnimationFrame節(jié)流
  if (!ticking) {
    window.requestAnimationFrame(() => {
      // 將滾動位置保存在localStorage中
      localStorage.setItem('scrollPosition', lastKnownScrollY);
      ticking = false;
    });
    ticking = true;
  }
});

// 頁面加載時，恢復(fù)之前保存的位置
window.addEventListener('DOMContentLoaded', () => {
  const savedPosition = localStorage.getItem('scrollPosition');
  if (savedPosition !== null) {
    window.scrollTo(0, parseInt(savedPosition));
  }
});

requestAnimationFrame 是瀏覽器提供的用于執(zhí)行高效動畫的 API，它會在下一次重繪前調(diào)用指定的回調(diào)函數(shù)，確保動畫與屏幕刷新率同步（通常為 60Hz），從而實現(xiàn)平滑、流暢的視覺效果，同時避免不必要的性能開銷。

它的執(zhí)行頻率比 scroll 要小一些，同時不滾動的時候也不會觸發(fā)，相比與 scroll 的高頻觸發(fā)，起到了一個節(jié)流效果。

2、Intersection Observer + 插入探針元素

Intersection Observer在確定頁面位置的時候有奇效，效率比scroll事件監(jiān)聽高了不止一星半點，但是如果存在大塊、不宜分割或者雜亂的元素，那么監(jiān)聽元素的選擇就會成為一個問題。

添加探針元素可以有效解決這個問題，探針元素只需要小小一個 div，可以設(shè)置為 visibility: hidden，不影響頁面布局。他們就像一個個哨兵，負責(zé)觀察你的視口到了什么位置。

（1）頁面插入探針元素

可以在重要段落、章節(jié)、標(biāo)題前插入隱形的小 div。

<article>
  <div id="section-1" class="observer-marker"></div>
  <h2>第一章 標(biāo)題</h2>
  <p>正文內(nèi)容...</p>

  <div id="section-2" class="observer-marker"></div>
  <h2>第二章 標(biāo)題</h2>
  <p>正文內(nèi)容...</p>

  <!-- 更多內(nèi)容 -->
</article>

（2）設(shè)置 Intersection Observer，并在頁面加載時，滾動到探針位置

// 創(chuàng)建 IntersectionObserver 實例
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 如果探針元素進入可視區(qū)，記錄它的id
      localStorage.setItem('lastVisibleSectionId', entry.target.id);
    }
  });
}, {
  threshold: 0.5 // 元素至少50%可見時觸發(fā)
});

// 監(jiān)聽所有探針元素
document.querySelectorAll('.observer-marker').forEach(marker => {
  observer.observe(marker);
});

// 頁面加載時，恢復(fù)到上次記錄的探針
window.addEventListener('DOMContentLoaded', () => {
  const lastId = localStorage.getItem('lastVisibleSectionId');
  if (lastId) {
    const element = document.getElementById(lastId);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' }); // 平滑滾動到探針
    }
  }
});

3、基于 URL Hash 錨點跳轉(zhuǎn)

給每一節(jié)內(nèi)容設(shè)置唯一 id，用戶閱讀到某個位置時，自動更新 URL 的 hash（錨點 #id），頁面加載時，瀏覽器根據(jù) hash 自動滾動到對應(yīng)位置。這種方式實現(xiàn)的跳轉(zhuǎn)甚至可以實現(xiàn)分享，因為位置信息是保存在 URL 里面的。

是不是很熟悉？CSDN的目錄跳轉(zhuǎn)就是這么實現(xiàn)的。

// 監(jiān)聽頁面滾動，動態(tài)更新 URL Hash
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 動態(tài)替換地址欄 hash，不刷新頁面
      history.replaceState(null, '', `#${entry.target.id}`);
    }
  });
}, {
  threshold: 0.5
});

// 監(jiān)聽所有需要作為錨點的元素
document.querySelectorAll('.observer-marker').forEach(marker => {
  observer.observe(marker);
});

// 頁面刷新后，瀏覽器會自動滾動到hash對應(yīng)的元素

三、總結(jié)

1、不同方案間對比總結(jié)

2、結(jié)語

實現(xiàn)回到上次閱讀位置，并不只有一種方式，關(guān)鍵是根據(jù)你的項目特點選擇：

• 內(nèi)容簡單 ? scrollTop 就夠了。

• 內(nèi)容結(jié)構(gòu)清晰 ? Intersection Observer是最佳。

• 需要分享/跳轉(zhuǎn) ? 用 URL Hash 最自然。

總之，真正優(yōu)秀的細節(jié)體驗，源自對用戶行為的深刻理解和用心打磨。

到此這篇關(guān)于前端實戰(zhàn)之如何讓用戶回到上次閱讀的位置的文章就介紹到這了,更多相關(guān)前端回到上次閱讀的位置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論