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

$('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（）”，它可以追溯到前一页，这是我想要的东西在滚动位置。通过这段代码，它会进入页面的顶部。我怎样才能解决这个问题？

来源

2017-03-29 J. Doe

你为什么不就叫'history.back（）''中的新页'？ – NineBerry

该代码应该在页面上的所有链接上工作，并且大多数链接都是常规链接......设置固定值会打败整个目的。 –

（1）正如文中建议'javascript：history.back（）'是历史对象上的JavaScript方法，它不是一个url。（2）使用'document.referrer'作为url。 – Abhitalks

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; 
     } 
    } 
});

完整的测试设置：

Caller.html

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

<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>

来源

2017-03-29 10:19:42 NineBerry

这有完全相同的问题：它回退，但不会恢复滚动位置，至少在Chrome中。 –

至少在Chrome和Firefox中按预期工作。如果你看到别的东西，请提供一个完整的示例来证明它不起作用。 – NineBerry

谢谢，这个例子确实有效。我看到的唯一区别是我的页面有更多的内容（数百个图像）。当内容加载速度不够快时，可能会出现问题。我会尝试重现并分享它。 –

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

回答

相关问题