Question

我想使用Javascript在页面内导航动画，但也要更改URL，以便用户点击＆＃34;返回＆＃34;回到上一页＆＃34;页面＆＃34;。

我不知道如何处理这个问题。我是否将我导航的内容放在新的html页面或同一页面上？

到目前为止我已尝试过：

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

这将完全重新加载到其他页面，并且不会允许动画。

<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按钮时，虽然它是一个锚元素，但该页面不会重新加载，但会执行淡出/淡出并且上面的导航栏始终保持不变。如果我点击后面的＆＃39;我的浏览器中的按钮，另一个动画将我带回到启动画面。

注意：这不是一个选项：

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

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

提前感谢您的答案！

Answer 1

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

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

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

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

你可以在这里轻松实例：

HTML：

class Meta:
    model = Reservation
    fields = ('id','reservedplaces','code','datecreation','travel','user',
             'iddepart','idarrivee')

JavaScript的：

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

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

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

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

Answer 2

你也可以添加一个JavaScript＆＃34; fadeout＆＃34;动画时＆＃34;卸载＆＃34;当前页面，以及＆＃34; fadein＆＃34;动画在下一页加载开始时执行。

如果您预取大部分内容，转换将会顺利进行。

要避免在点击链接时加载网页，请在您的链接中附加onclick个活动，然后按JavaScript完成e.preventDefault();回调，如此问题中所述：{来自Mozilla Dev Network的{3}} How to stop default link click behavior with jQuery

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

关于链接预取：https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault

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

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

使用Javascript导航，但更改URL

2 个答案: