javascript - 如何在 Javascript/HTML 中保持重定向时的滚动位置

Question

我目前正在为本地服务器开发一个 MP3 播放器网站。它包括一个“播放器”和下面的歌曲列表。

问题是当重定向到另一首歌曲时(通过单击或 JavaScript 重定向)，它会滚动到页面顶部。当我在列表的最下方点击一首歌曲时，这很烦人。

它会在刷新页面时保留位置，但不会在重定向时保留位置。

<小时/>

网址如下所示:

http://192.168.1.130/music/listen.php?id=SongName

重定向期间唯一改变的是 ID 的歌曲名称。

对于重定向本身，执行操作的是点击或 JavaScript。

HTML:

<tr>
    <td><a href="/music/listen.php?id=AnotherSong">AnotherSong</a></td>
    <td>11.04.2019 15:52</td>
</tr>

JavaScript

window.location.href = "/music/listen.php?id=AnotherSong";

<小时/>

是否有任何 JavaScript/HTML 功能可以保持滚动位置？或者我可能需要将滚动位置存储在某处并在重定向完成后再次设置位置？

Answer 1

在同一页面重定向时保持 Y 偏移位置

无需 JavaScript。

只需使用 # anchor 。

如果页面包含:

<h2 id="section-heading-1">

// [... CODE HERE...]

<h2 id="section-heading-2">

// [... CODE HERE...]

<h2 id="section-heading-3">

然后是链接:

• <a href="#section-heading-1">
• <a href="#section-heading-2">
• <a href="#section-heading-3">

将链接到各种<h2>章节标题。

<小时/>

重定向到另一个页面时保持 Y 偏移位置

一种方法是使用 localStorage .

您可以申请onscroll事件至window (带节流)并反复更新y-offset值 localStorage .

然后，每当加载新页面时，您都可以让浏览器引用 localStorage并且，如果它找到 y-offset值，调整浏览器视口(viewport)内的页面滚动。

<小时/>

工作示例:

// ORIGIN PAGE
// ===========

// Save Y Offset Position to localStorage
const recordVerticalOffset = () => {

  localStorage.setItem('pageVerticalPosition', window.scrollY);
}

// Only save window position after scrolling stops
const throttleScroll = (delay) => {

  let time = Date.now();

  const checkScroll = setInterval(() => {

    if (Date.now() > (time + delay)) {

      clearInterval(checkScroll);
      return recordVerticalOffset();
    }
  }, 300);
}

// Scroll Event Listener
window.addEventListener('scroll', throttleScroll(1000));


// DESTINATION PAGE
// ================

const repositionPage = () => {

  let pageVerticalPosition = localStorage.getItem('pageVerticalPosition') || 0;

  window.scrollTo(0, pageVerticalPosition);
}

window.addEventListener('load', repositionPage);