Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript

How To Go Back To The Previous Page And Restore The Scroll Position After An Animation?

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

Solution 1:

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

    functionnewPage() 
    {
        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><ahref="Callee.html">Go to Callee</a></body></html>

Callee.html

<html><head><title>Callee</title></head><body><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><ahref="javascript:history.back()">Go back</a><script>
$('a').click(function (e) 
{
    e.preventDefault();
    var newLocation = this.href;
    $('body').fadeOut(250, newPage);

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

Post a Comment for "How To Go Back To The Previous Page And Restore The Scroll Position After An Animation?"