动画后如何返回上一页并恢复滚动位置？答案

【问题标题】：How to go back to the previous page and restore the scroll position after an animation?动画后如何返回上一页并恢复滚动位置？
【发布时间】：2017-03-29 10:11:54
【问题描述】：

$('a').click(function (e) {
    e.preventDefault();

    var newLocation = this.href;

    $('body').fadeOut(250, newPage);

    function newPage() {
        window.location = newLocation;
    }
});

目的是在点击链接时淡出页面。问题在于这样的链接：

<a href='javascript:history.back()'>Link</a>

通常，当href为'javascript:history.back()'时，它会回到上一页的滚动位置，这就是我想要的。使用此代码，它会转到页面顶部。我该如何解决这个问题？

【问题讨论】：

你为什么不直接在newPage中调用history.back()？
该代码应该适用于页面上的所有链接，并且大多数链接是常规链接...设置固定值会破坏整个目的。
(1) 正如文本所暗示的，javascript:history.back() 是历史对象上的 JavaScript 方法，而不是 url。 (2) 网址使用document.referrer。
和NineBerry的回答一样的问题：直接调用history.back()或者document.referrer返回，但是滚动位置没有恢复。

标签： javascript html

【解决方案1】：

history.back 是一个函数。您必须将其称为函数。通过分配给window.location 返回导航历史记录不起作用。

让您的代码根据点击链接的 href 表现出不同的行为。

$('a').click(function (e) 
{
    e.preventDefault();
    var newLocation = this.href;
    $('body').fadeOut(250, newPage);

    function newPage() 
    {
        if(newLocation == "javascript:history.back()")
        {
          history.back();
        }
        else
        {
           window.location = newLocation;
        }
    }
});

完整的测试集：

来电者.html

<html>
<head><title>Caller</title></head>
<body>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>
<div>XXXXXXXXXXXXX</div>

<a href="Callee.html">Go to Callee</a>

</body>
</html>

Callee.html

<html>
<head><title>Callee</title></head>
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <a href="javascript:history.back()">Go back</a>

<script>
$('a').click(function (e) 
{
    e.preventDefault();
    var newLocation = this.href;
    $('body').fadeOut(250, newPage);

    function newPage() 
    {
        if(newLocation == "javascript:history.back()")
        {
          history.back();
        }
        else
        {
           window.location = newLocation;
        }
    }
});
</script>

  </body>
</html>

【讨论】：

这有完全相同的问题：它会返回，但不会恢复滚动位置，至少在 Chrome 中是这样。
至少在 Chrome 和 Firefox 中按预期工作。如果您看到其他内容，请提供一个完整示例来证明它不起作用。
谢谢，这个例子确实有效。我看到的唯一区别是我的页面内容更多（数百张图片）。当内容加载速度不够快时，可能会出现问题。我会尽量复制和分享。
Firefox 不显示淡出动画。整个方法似乎在浏览器中效果不佳。到处都有不同的结果。
@J.Doe 您还需要通过调用e.preventDefault() 来禁用点击的默认行为。我已经扩展了答案中的代码。