javascript - 如何在Javascript / HTML中重定向时保持滚动位置(How to keep scroll position on redirect in Javascript / HTML)

Question

I'm currently working on a mp3 player website for a local server.

(我目前正在本地服务器的mp3播放器网站上工作。)

It includes a "player" and a list of songs underneath.

(它包括一个“播放器”和下面的歌曲列表。)

The issue is when redirecting to another song (either via clicking or javascript redirect), it scrolls to the top of the page.

(问题是当重定向到另一首歌曲时（通过单击或javascript重定向），它会滚动到页面顶部。)

It's quite annoying when I'm far down the list and clicks on a song.

(当我不在列表中并单击一首歌曲时，这很烦人。)

It keeps the position when refreshing the page, but not with redirect.

(刷新页面时，它保持位置，但不带重定向。)

---

The url looks like this:

(网址看起来像这样：)

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

The only thing that changes during a redirect is the song name for the id.

(重定向期间唯一发生变化的是ID的歌曲名称。)

For the redirect itself, it's either a click or JavaScript that does the action.

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

HTML:(HTML：)

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

JavaScript(的JavaScript)

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

---

Are there any JavaScript / HTML features that keeps the scrolling position?

(是否有任何JavaScript / HTML功能可保持滚动位置？)

Or would I maybe need to store the scrolling position somewhere and set the position again after the redirect has been done?

(还是需要将滚动位置存储在某个位置，并在重定向完成后再次设置该位置？)

  ask by Typewar translate from so

Answer 1

Maintaining Y Offset Position when redirecting on the same page(在同一页面上重定向时保持Y偏移位置)

No javascript needed.

(不需要javascript。)

Simply use the # anchor.

(只需使用#锚即可。)

If a page contains:

(如果页面包含：)

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

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

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

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

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

Then the links:

(然后链接：)

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

Will link to the various <h2> section headings.

(将链接到各个<h2>部分标题。)

---

Maintaining Y Offset Position when redirecting to another page(重定向到另一页时保持Y偏移位置)

One approach would be to use localStorage .

(一种方法是使用localStorage 。)

You can apply an onscroll event to the window (with throttling) and repeatedly update the y-offset value in localStorage .

(您可以将onscroll事件应用于window （进行限制），并重复更新localStorage的y-offset值。)

Then, whenever a new page loads, you can have the browser refer to localStorage and, if it finds a y-offset value, adjust the page scroll within the browser viewport.

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

---

Working Example:

(工作示例：)

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

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

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

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

  let time = Date.now();

  return () => {
    if ((time + delay - Date.now()) < 0) {
      recordVerticalOffset();
      time = Date.now();
    }
  }
}

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


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

const repositionPage = () => {

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

  window.scrollTo(0, pageVerticalPosition);
}

window.addEventListener('load', repositionPage);