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?
1 answers
solution1
0 ACCPTED 2017-03-29 10:19:42
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
html/js: go back to previous page in the same scroll position
jQuery scroll position history in infinite scroll when go back to previous page
How to configure Firebase UI to go back to previous page after sign in
How to “GO BACK” to the previous page after submit is clicked on a form?
Restore Scroll Position From Previous Page Load in Angular App
Scroll position won't reset when go to other page after pressing back button
Go Back to Previous Page
Go back to the scroll bar position on a dynamically sized page
how to remember previous page's scroll position when click back button
JQuery: How to return to the exact same scroll position when going back to previous page
Related Tags