如何在 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。

只需使用#锚点。

如果页面包含：

<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值，则在浏览器视口内调整页面滚动。

工作示例：

// 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);