如何在Javascript / HTML中保持重定向滚动位置答案

【问题标题】：How to keep scroll position on redirect in Javascript / HTML如何在Javascript / HTML中保持重定向滚动位置
【发布时间】：2020-03-25 22:24:57
【问题描述】：

我目前正在为本地服务器开发一个 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 功能可以保持滚动位置？或者我可能需要将滚动位置存储在某处并在重定向完成后再次设置位置？

【问题讨论】：

可能重复：stackoverflow.com/questions/16388772/…

标签： javascript html

【解决方案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（带有限制）并重复更新localStorage 中的y-offset 值。

然后，每当加载新页面时，您都可以让浏览器引用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);

【讨论】：

我测试了底部示例（因为我会尽量避免使用主题标签，因为 PHP 执行主要代码），它似乎有点不一致。有时它会记住位置，有时它会记住以前的位置。你知道我应该记住什么以使它更“稳定”吗？
在throttleScroll 中，参数1000 表示整秒。您可能希望将其更改为 500 毫秒或 300 毫秒。
好吧，所以如果我“合理地”快速滚动，它似乎不会保存滚动位置。我能够通过将延迟设置为 10 毫秒来“解决”这个问题。我想这很好，因为服务器只在本地网络上使用。谢谢你帮助我！

【解决方案2】：

您可以使用 jQuery 的 .animate()、.offset() 和 scrollTop。喜欢

$(document.body).animate({
'scrollTop':   $('#anchorName').offset().top}, 2000);

示例链接：http://jsbin.com/unasi3/edit

如果您不想制作动画，请使用 .scrollTop() 之类的

$(document.body).scrollTop($('#anchorName').offset().top);

或 javascripts 原生 location.hash 之类的

location.hash = '#' + anchorid;

【讨论】：