How to go back to the previous page and restore the scroll position after an animation?

Question

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

    var newLocation = this.href;

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

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

The intention is to fade out the page whenever a link is clicked. The problem is with links like this:

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

Normally, when href is 'javascript:history.back()', it goes back to the scroll position on the previous page, which is what I want. With this code, it goes to the top of the page. How can i fix this?

The code is supposed to work on all links on the page and most links are regular links... setting a fixed value would defeat the whole purpose. — J. Doe, Mar 29 '17 at 10:16
(1) As the text suggests `javascript:history.back()` is a JavaScript method on the history object, its not a url. (2) Use `document.referrer` for the url. — Abhitalks, Mar 29 '17 at 10:19
Same problem as NineBerry's answer: Calling history.back() or document.referrer directly goes back, but the scroll position is not restored. — J. Doe, Mar 29 '17 at 10:35

NineBerry · Accepted Answer · 2019-04-26T12:52:46.010

history.back is a function. You have to call it as a function. Going back in the navigation history by assigning to window.location does not work.

Have your code behave differently based on the href of the clicked link.

$('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;
        }
    }
});

Complete test set:

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

That has exactly the same problem: It goes back, but doesn't restore the scroll position, at least in Chrome. — J. Doe, Mar 29 '17 at 10:30
Works as expected in at least Chrome and Firefox. If you see something else, provide a full example to demonstrate that it doesn't work. — NineBerry, Mar 29 '17 at 10:35
Thanks, that example does indeed work. The only difference I see is that my page has a lot more content (hundreds of images). Maybe the problem occurs when the content doesn't load fast enough. I'll try to reproduce and share it. — J. Doe, Mar 29 '17 at 11:17
Firefox doesn't show the fade out animation though. The whole approach doesn't seem to work very well across browsers. Different results everywhere. — J. Doe, Mar 29 '17 at 11:40
@J.Doe You also need to disable default behaviour of the click by calling `e.preventDefault()`. I have extended the code in the answer. — NineBerry, Mar 29 '17 at 11:51
Sorry, I forgot to mention it, but I already did that. The strange thing is: When I remove preventDefault() and just call $('body').fadeOut(250) without callback, it works. I don't get the whole animation obviously, but it scrolls back to the correct position. — J. Doe, Mar 29 '17 at 11:58
Using the code from the answer, I can see the fadeout animation in both Firefox and Chrome. And the scroll position is also restored. — NineBerry, Mar 29 '17 at 12:02
Your solution is technically correct, so I'll mark it, although it doesn't work for me. As href='javascript:history.back()' works, I can assume the problem is not in the target page. It seems the problem is a specific one with Chrome and my page setup. — J. Doe, Mar 29 '17 at 12:17
@Adnan @dsb Chrome's Autoscroll behaviour seems to have changed. It doesn't do the automatic scroll when navigating back even when using the back button in the browser for the previous code. I have modified the code to use `
` instead of `
`. It works now again for me in Chrome. This is also a more realistic scenario. — NineBerry, Apr 26 '19 at 12:55

How to go back to the previous page and restore the scroll position after an animation?

1 Answers1

Linked