Question

我有一个很长的HTML page，在页面上我给了一些links来打开一个overlay来显示一些数据，当我崩溃时overlay我到达页面的top，如果我点击在页面末尾打开overlay，则应该到达该位置。

我做过Google但没有得到任何正确的解决方案。

这是我的jQuery代码

此代码用于打开overlay

 $(document.body).on('click', '.viewAllArt', function () {       
        $('.articleAll').css('display', 'none');
        $('.viewMain').css('display', 'none');

        $('.articleAll').css('display', 'block');
    });

此代码用于关闭overlay

   $('.collapsColony').click(function () {
        $('.articleAll').css('display', 'none');
        $('.articleAll').css('display', 'none');
        $('.viewMain').css('display', 'block');
    });

抱歉，我没有显示任何plunker链接，因为大部分文件都是相互依赖的。

任何建议对我都有帮助。

已更新

Answer 1

打开叠加层时，使用

保存屏幕滚动位置

var positionvalue= $(document).scrollTop()

    //you can save positionvalue in a cookie

在本地存储中。稍后当您返回页面时，请使用此值恢复屏幕位置

//retrieve positionvalue from the previously saved cookie
    $(document).scrollTop(positionvalue);

Answer 2

打开叠加层时存储您的位置。然后，在关闭叠加层时滚动到存储的位置。

您可以使用jQuery的scrollTop功能。

编辑：代码示例

＆＃13;

var position;

$("button").click(function(){
  if(!!position)
     $(document).scrollTop(position);
});
$("p").click(function(){
  position = $(document).scrollTop();
});




$(document.body).on('click', '.viewAllArt', function() {
  $('.articleAll').css('display', 'none');
  $('.viewMain').css('display', 'none');

  $('.articleAll').css('display', 'block');
  position = $(document).scrollTop();
});

$('.collapsColony').click(function() {
  $('.articleAll').css('display', 'none');
  $('.articleAll').css('display', 'none');
  $('.viewMain').css('display', 'block');
  $(document).scrollTop(position);
});

＆＃13;

button{
  position:fixed;
  top:0;
  right:0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p><p><a href="#">Lorem</a></p></div>
<button>SCROLL</button>

＆＃13;

编辑：我更新了示例以表明它确实有效。您的问题可能在您的代码中的其他位置。

如何在java脚本中到达同一页面上的先前位置？

2 个答案: