使用 Javascript 导航，但更改 URL答案

【问题标题】：Navigate using Javascript, but change the URL使用 Javascript 导航，但更改 URL
【发布时间】：2018-03-03 23:42:15
【问题描述】：

我想使用 Javascript 在带有动画的页面内导航，但还要更改 URL，以便用户可以单击“返回”返回上一个“页面”。

我不知道如何解决这个问题。我是将要导航到的内容放在新的 html 页面上，还是放在同一页面上？

到目前为止我已经尝试过：

<a href="/someOtherPage">Some Other Page</a>

这将完全重新加载到 someOtherPage，并且不允许动画。

<a href="#" onclick="animateToOtherSection()">Some Other Page</a>
<script>
  function animateToOtherSection() {
    //things like fade in/out or scroll
  }
</script>

如果我要导航到的内容存在于此页面中，则此方法有效，这没关系，但 URL 不会更改（附加的 # 除外）。

如果我尝试在 Javascript 中更改 window.href，整个页面会重新加载，这是不希望的。

这个问题的灵感来自一些网站like this。当单击See our projects 按钮时，虽然它作为 一个锚元素，但页面不会重新加载，而是执行淡出/淡入，并且上方的导航栏始终保持不变。如果我在浏览器中单击“返回”按钮，另一个动画会将我带回初始屏幕。

注意：这不是一个选项：

<a href="#section">Some Other Page</a>

我不想只滚动到一个元素，而是在屏幕上操纵和显示/隐藏很多元素。

提前感谢您的回答！

【问题讨论】：

看起来 this 就是您要查找的内容。
编辑：我认为这正是我想要的。如果您可以在答案中添加更多详细信息，了解如何在单击以自己操作历史记录时中断重新加载，我们将不胜感激。

标签： javascript html css navigation

【解决方案1】：

DOM 窗口对象通过历史对象提供对浏览器历史的访问。它公开了有用的方法和属性，让您可以在用户历史记录中来回移动，以及 - 从 HTML5 开始 - 操作历史堆栈的内容。

https://developer.mozilla.org/en-US/docs/Web/API/History_API

从服务器加载数据并将返回的 HTML 放入匹配的元素中。

http://api.jquery.com/load/

你可以在这里简单的例子：

HTML：

<button id="changeUrl">See our projects</button>

JavaScript：

$('#changeUrl').click(function () {
    history.pushState({}, 'Title', '/Url/Test');

    $(document).load('/url html');
});

您也可以添加动画，例如：

$('#changeUrl').click(function () {
    $('body').fadeOut();

    history.pushState({}, 'Title', '/Url/Test');

    $(document).load('/url html', function () {
        $('body').fadeIn();            
    });
});

【讨论】：

【解决方案2】：

您还可以在“卸载”当前页面时添加 JavaScript“淡出”动画，并在下一页加载开始时执行“淡入”动画。

如果您预取大部分内容，过渡会很顺利。

为避免在单击链接时加载页面，请将onclick 事件附加到您的链接，并通过e.preventDefault(); 完成您的JavaScript 回调，如以下问题所述：来自Mozilla Dev Network 的How to stop default link click behavior with jQuery ：https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault

如果事件可取消，则取消该事件，而不停止事件的进一步传播。

关于链接预取：https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ

<link rel="prefetch" href="/images/big.jpeg">

或者甚至真的用style=display:none; 加载<img 来隐藏它们……

【讨论】：