How do I go back to the previous page and restore the scroll position after animation?
$('a').click(function (e) {
e.preventDefault();
var newLocation = this.href;
$('body').fadeOut(250, newPage);
function newPage() {
window.location = newLocation;
}
});
The goal is to stroke the page whenever a link is clicked. The problem is with links like this:
<a href='javascript:history.back()'>Link</a>
Usually when the href is "javascript: history.back ()" it goes back to the scroll position on the previous page, which is what I want. This code will move it to the top of the page. How can I fix this?
+4
source to share
1 answer
history.back
is a function. You have to call this as a function. Returning to navigation history by assignment window.location
does not work.
Your code should behave differently depending on the link you clicked on.
$('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 set of tests:
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>
0
source to share