堆栈内存溢出
  简体   繁体   English

如何返回上一页并在动画后恢复滚动位置？

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

 原文  2017-03-29 10:11:54  1   1    javascript/ html

问题描述

$('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. 通常，当href是'javascript：history.back（）'时，它会回到上一页的滚动位置，这就是我想要的。 With this code, it goes to the top of the page. 使用此代码，它将转到页面顶部。 How can i fix this? 我怎样才能解决这个问题？

1 个解决方案

解决方案1
 0 已采纳  2017-03-29 10:19:42

history.back is a function. history.back是一个函数。 You have to call it as a function. 你必须把它称为一个函数。 Going back in the navigation history by assigning to window.location does not work. 通过分配window.location返回导航历史记录不起作用。

Have your code behave differently based on the href of the clicked link. 根据所点击链接的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;
        }
    }
});

Complete test set: 完整的测试集：

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 html/js: 在相同的滚动位置返回上一页 - html/js: go back to previous page in the same scroll position 返回上一页时无限滚动中的jQuery滚动位置历史记录 - jQuery scroll position history in infinite scroll when go back to previous page 如何配置 Firebase UI 以在登录后返回上一页 - 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? 从Angular App中的上一页加载中还原滚动位置 - 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 单击返回按钮时如何记住上一页的滚动 position - how to remember previous page's scroll position when click back button JQuery：返回上一页时如何返回完全相同的滚动位置 - JQuery: How to return to the exact same scroll position when going back to previous page
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM