通过平滑动画滚动重定向到另一个 URL

Posted 2023-02-22

【中文标题】通过平滑动画滚动重定向到另一个 URL

【英文标题】：Redirect to another URL by scrolling with smooth animation

【发布时间】：2020-01-24 05:49:25

【问题描述】：

我正在尝试复制这些人正在做的事情here

我已经设置了 2 个测试页面，所以也许我可以更好地解释我想要实现的目标。

这是我想登陆的页面 - eh19.ehdsonline.com/sof-video

这就是我向下滚动时想要去的页面——eh19.ehdsonline.com/sof-home

想法是，当您进入“SOF 视频”页面时——通过向下滚动——我想滚动到“SOF 主页”，并带有平滑的过渡/动画。与 www.e-types.com 示例完全相同。

这是我试图实现此目的的代码，但它似乎无法完成这项工作。

document.getElementById("content-986").onscroll = function() 
   window.location = 'http://eh19.ehdsonline.com/sof-home';
   console.log("test");

【问题讨论】：

你找到方法了吗？

【参考方案1】：

您展示的示例应用程序实际上并没有重定向到新页面，尽管它看起来是。它是一个单页应用程序，并且 URL 似乎正在更改。

使用 html5 中的历史 API 可以做到这一点。这个想法是在不重新加载页面的情况下调用更改 url。示例：

window.history.pushState("object or string", "Title", "/new-url");

您可以加载一个组件/div，当您滚动时，您可以显示另一个组件/div 并更改 url。如果您使用 React Router 之类的东西，您可以在 React 中轻松实现这一点。

【讨论】：

谢谢。尽管在我设置的 2 页中，这将如何翻译？我对 javascript 很陌生，示例代码并没有真正敲响警钟。更不用说 React Router 的建议了。我会很感激这里的一些帮助......谢谢。