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

Question

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

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

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

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

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

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

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

Answer 1

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

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

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

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