如何返回上一頁並在動畫之後恢復滾動位置？

$('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

謝謝，這個例子確實有效。我看到的唯一區別是我的頁面有更多的內容（數百個圖像）。當內容加載速度不夠快時，可能會出現問題。我會嘗試重現並分享它。 –

如何返回上一頁並在動畫之後恢復滾動位置？

回答

相關問題